<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="一、CSS基础1.CSS简介 CSS的全称：层叠样式表Cascading Style Sheets CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽度高等等   简单理解：CSS可以美化HTML,让HTML更漂亮 核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式的分离   2.CSS的编写位置行内样式 写在标签的style属性中,(又称：内联样式)  语">
<meta property="og:type" content="article">
<meta property="og:title" content="css">
<meta property="og:url" content="https://mihaoyou.gitee.io/css/index.html">
<meta property="og:site_name" content="Cactus">
<meta property="og:description" content="一、CSS基础1.CSS简介 CSS的全称：层叠样式表Cascading Style Sheets CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽度高等等   简单理解：CSS可以美化HTML,让HTML更漂亮 核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式的分离   2.CSS的编写位置行内样式 写在标签的style属性中,(又称：内联样式)  语">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/mihaoyou/pic-go/raw/master/img/202309151149439.png">
<meta property="article:published_time" content="2023-08-02T02:05:45.000Z">
<meta property="article:modified_time" content="2023-09-15T03:49:38.369Z">
<meta property="article:author" content="云雪">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/mihaoyou/pic-go/raw/master/img/202309151149439.png">
    
    
      
        
          <link rel="shortcut icon" href="/images/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
        
      
    
    <!-- title -->
    <title>css</title>

    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">


     <!-- 添加到这里！！ -->
     
<script src="/js/switch.js"></script>


    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Cactus" type="application/atom+xml">
</head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="顶部" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/mybatis/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/ES6/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>

        <li><a class="icon" aria-label="切换主题 " href="#"><i class="fas fa-lightbulb" aria-hidden="true" onmouseover="$('#i-switch').toggle();" onmouseout="$('#i-switch').toggle();" onclick="switchNightMode();return false";></i></a></li>

      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
      <span id="i-switch" class="info" style="display:none;">切换主题</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/css/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/css/&text=css"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/css/&is_video=false&description=css"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=css&body=Check out this article: https://mihaoyou.gitee.io/css/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/css/&name=css&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/css/&t=css"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81CSS%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">一、CSS基础</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">1.CSS简介</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-CSS%E7%9A%84%E7%BC%96%E5%86%99%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.2.</span> <span class="toc-text">2.CSS的编写位置</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.1.</span> <span class="toc-text">行内样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.2.</span> <span class="toc-text">内部样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.3.</span> <span class="toc-text">外部样式</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.3.</span> <span class="toc-text">3.样式表的优先级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83"><span class="toc-number">1.4.</span> <span class="toc-text">4.语法规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-CSS%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC"><span class="toc-number">1.5.</span> <span class="toc-text">5.CSS代码风格</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.</span> <span class="toc-text">CSS选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%85%E6%8B%AC%EF%BC%9A"><span class="toc-number">2.1.</span> <span class="toc-text">基本选择器包括：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E9%80%9A%E9%85%8D%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.1.</span> <span class="toc-text">通配选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.2.</span> <span class="toc-text">元素选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.3.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.4.</span> <span class="toc-text">id选择器</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.</span> <span class="toc-text">复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BA%A4%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.1.</span> <span class="toc-text">交集选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.2.</span> <span class="toc-text">并集选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.3.</span> <span class="toc-text">后代选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%90%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.4.</span> <span class="toc-text">子代选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.5.</span> <span class="toc-text">兄弟选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%9B%B8%E9%82%BB%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.5.1.</span> <span class="toc-text">相邻兄弟选择器：</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.5.2.</span> <span class="toc-text">通用兄弟选择器：</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.6.</span> <span class="toc-text">属性选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.7.</span> <span class="toc-text">伪类选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BC%AA%E7%B1%BB%E5%8A%A8%E6%80%81%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.7.1.</span> <span class="toc-text">常用的伪类动态选择器：</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.2.</span> <span class="toc-text">结构伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E5%90%A6%E5%AE%9A%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.3.</span> <span class="toc-text">否定伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#UI%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.4.</span> <span class="toc-text">UI伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%9B%AE%E6%A0%87%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.5.</span> <span class="toc-text">目标伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E8%AF%AD%E8%A8%80%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.6.</span> <span class="toc-text">语言伪类</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.8.</span> <span class="toc-text">伪元素选择器</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">2.3.</span> <span class="toc-text">选择器优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7"><span class="toc-number">3.</span> <span class="toc-text">CSS三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%B1%82%E5%8F%A0%E6%80%A7"><span class="toc-number">3.1.</span> <span class="toc-text">1.层叠性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E7%BB%A7%E6%89%BF%E6%80%A7"><span class="toc-number">3.2.</span> <span class="toc-text">2.继承性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">3.3.</span> <span class="toc-text">3.优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E9%A2%9C%E8%89%B2"><span class="toc-number">4.</span> <span class="toc-text">CSS颜色</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A2%9C%E8%89%B2%E7%9A%84%E8%A1%A8%E7%A4%BA"><span class="toc-number">4.1.</span> <span class="toc-text">颜色的表示</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%B8%80%EF%BC%9A%E9%A2%9C%E8%89%B2%E5%90%8D"><span class="toc-number">4.1.1.</span> <span class="toc-text">表达方式一：颜色名</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%BA%8C%EF%BC%9Argb-%E6%88%96-rgba"><span class="toc-number">4.1.2.</span> <span class="toc-text">表达方式二：rgb 或 rgba</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%B8%89%EF%BC%9AHEX%E6%88%96HEXA"><span class="toc-number">4.1.3.</span> <span class="toc-text">表达方式三：HEX或HEXA</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E5%9B%9B%EF%BC%9AHSL%E6%88%96HSLA"><span class="toc-number">4.1.4.</span> <span class="toc-text">表达方式四：HSL或HSLA</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%B8%B8%E8%A7%81%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7"><span class="toc-number">5.</span> <span class="toc-text">CSS常见字体属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F"><span class="toc-number">5.1.</span> <span class="toc-text">1.字体大小</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%AD%97%E4%BD%93%E6%97%8F"><span class="toc-number">5.2.</span> <span class="toc-text">2.字体族</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%AD%97%E4%BD%93%E9%A3%8E%E6%A0%BC"><span class="toc-number">5.3.</span> <span class="toc-text">3.字体风格</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86"><span class="toc-number">5.4.</span> <span class="toc-text">4.字体粗细</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E5%AD%97%E4%BD%93%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95"><span class="toc-number">5.5.</span> <span class="toc-text">5.字体复合写法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7"><span class="toc-number">6.</span> <span class="toc-text">常用文本属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2%EF%BC%9A"><span class="toc-number">6.1.</span> <span class="toc-text">1.文本颜色：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%96%87%E6%9C%AC%E9%97%B4%E8%B7%9D"><span class="toc-number">6.2.</span> <span class="toc-text">2.文本间距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0"><span class="toc-number">6.3.</span> <span class="toc-text">3.文本修饰</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B"><span class="toc-number">6.4.</span> <span class="toc-text">4.文本缩进</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90-%E6%B0%B4%E5%B9%B3%E6%96%B9%E5%90%91"><span class="toc-number">6.5.</span> <span class="toc-text">5.文本对齐_水平方向</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E8%A1%8C%E9%AB%98"><span class="toc-number">6.6.</span> <span class="toc-text">6.行高</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E8%A1%8C%E9%AB%98%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">6.7.</span> <span class="toc-text">7.行高注意事项</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90-%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91"><span class="toc-number">6.8.</span> <span class="toc-text">8.文本对齐_垂直方向</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-vertical-align"><span class="toc-number">6.9.</span> <span class="toc-text">9.vertical-align</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">7.</span> <span class="toc-text">列表相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.</span> <span class="toc-text">表格相关属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E8%BE%B9%E6%A1%86%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.1.</span> <span class="toc-text">1.边框相关属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E8%A1%A8%E6%A0%BC%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.2.</span> <span class="toc-text">2.表格相关属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">9.</span> <span class="toc-text">背景相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">10.</span> <span class="toc-text">鼠标相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">11.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E9%95%BF%E5%BA%A6%E5%8D%95%E4%BD%8D"><span class="toc-number">11.1.</span> <span class="toc-text">1.CSS中常用的长度单位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">11.2.</span> <span class="toc-text">2.元素的显示模式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%80%BB%E7%BB%93%E5%90%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A0%B7%E5%BC%8F"><span class="toc-number">11.3.</span> <span class="toc-text">3.总结各元素的显示样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">11.4.</span> <span class="toc-text">4.修改元素显示模式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%9A%84%E7%BB%84%E6%88%90%E9%83%A8%E5%88%86"><span class="toc-number">11.5.</span> <span class="toc-text">5.盒子模型的组成部分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E7%9B%92%E5%AD%90%E5%86%85%E5%AE%B9%E5%8C%BA"><span class="toc-number">11.6.</span> <span class="toc-text">6.盒子内容区</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E9%BB%98%E8%AE%A4%E5%AE%BD%E5%BA%A6"><span class="toc-number">11.7.</span> <span class="toc-text">7.默认宽度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E7%9B%92%E5%AD%90%E7%9A%84%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="toc-number">11.8.</span> <span class="toc-text">8.盒子的内边距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E7%9B%92%E5%AD%90%E7%9A%84%E8%BE%B9%E6%A1%86"><span class="toc-number">11.9.</span> <span class="toc-text">9.盒子的边框</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E7%9B%92%E5%AD%90%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="toc-number">11.10.</span> <span class="toc-text">10.盒子外边距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-margin%E5%A1%8C%E9%99%B7%E9%97%AE%E9%A2%98"><span class="toc-number">11.11.</span> <span class="toc-text">11.margin塌陷问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-margin%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98"><span class="toc-number">11.12.</span> <span class="toc-text">12.margin合并问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-%E5%A4%84%E7%90%86%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA"><span class="toc-number">11.13.</span> <span class="toc-text">13.处理内容溢出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">11.14.</span> <span class="toc-text">14.隐藏元素的两种方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E6%A0%B7%E5%BC%8F%E7%9A%84%E7%BB%A7%E6%89%BF"><span class="toc-number">11.15.</span> <span class="toc-text">15.样式的继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F"><span class="toc-number">11.16.</span> <span class="toc-text">16.默认样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-CSS%E5%B8%83%E5%B1%80%E6%8A%80%E5%B7%A7"><span class="toc-number">11.17.</span> <span class="toc-text">17.CSS布局技巧</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4%E7%9A%84%E7%A9%BA%E7%99%BD%E9%97%AE%E9%A2%98"><span class="toc-number">11.18.</span> <span class="toc-text">18.元素之间的空白问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%E7%9A%84%E5%B9%BD%E7%81%B5%E7%A9%BA%E7%99%BD%E9%97%AE%E9%A2%98"><span class="toc-number">11.19.</span> <span class="toc-text">19.行内块元素的幽灵空白问题</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8"><span class="toc-number">12.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%85%83%E7%B4%A0%E6%B5%AE%E5%8A%A8%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">12.1.</span> <span class="toc-text">1.元素浮动的特点</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%B5%AE%E5%8A%A8%E5%90%8E%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">12.2.</span> <span class="toc-text">2.浮动后的影响</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E8%A7%A3%E5%86%B3%E6%B5%AE%E5%8A%A8%E4%BA%A7%E7%94%9F%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">12.3.</span> <span class="toc-text">3.解决浮动产生的影响</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.</span> <span class="toc-text">定位</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.1.</span> <span class="toc-text">1.相对定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.2.</span> <span class="toc-text">2.绝对定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.3.</span> <span class="toc-text">3.固定定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E7%B2%98%E6%80%A7%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.4.</span> <span class="toc-text">4.粘性定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E5%B1%82%E7%BA%A7"><span class="toc-number">13.5.</span> <span class="toc-text">定位层级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%89%B9%E6%AE%8A%E5%BA%94%E7%94%A8"><span class="toc-number">13.6.</span> <span class="toc-text">定位的特殊应用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B1%80"><span class="toc-number">14.</span> <span class="toc-text">布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%89%88%E5%BF%83"><span class="toc-number">14.1.</span> <span class="toc-text">1.版心</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%B8%83%E5%B1%80%E5%B8%B8%E7%94%A8%E7%B1%BB%E5%90%8D"><span class="toc-number">14.2.</span> <span class="toc-text">2.布局常用类名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E9%87%8D%E7%BD%AE%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F"><span class="toc-number">14.3.</span> <span class="toc-text">3.重置默认样式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81HTML5%E7%AE%80%E4%BB%8B"><span class="toc-number">15.</span> <span class="toc-text">二、HTML5简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%96%B0%E5%A2%9E%E5%B8%83%E5%B1%80%E6%A0%87%E7%AD%BE"><span class="toc-number">15.1.</span> <span class="toc-text">1.新增布局标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%96%B0%E5%A2%9E%E7%8A%B6%E6%80%81%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.</span> <span class="toc-text">2.新增状态标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1-meter%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.1.</span> <span class="toc-text">2.1 meter标签</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-progress%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.2.</span> <span class="toc-text">2.2 progress标签</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%B0%E5%A2%9E%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">15.3.</span> <span class="toc-text">3.新增列表标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%B0%E5%A2%9E%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE"><span class="toc-number">15.4.</span> <span class="toc-text">4.新增文本标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%B3%A8%E9%9F%B3"><span class="toc-number">15.4.1.</span> <span class="toc-text">文本注音</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0"><span class="toc-number">15.4.2.</span> <span class="toc-text">文本标记</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span class="toc-number">15.5.</span> <span class="toc-text">5.新增表单标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#5-1%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6%E5%B1%9E%E6%80%A7"><span class="toc-number">15.5.1.</span> <span class="toc-text">5.1新增表单控件属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-2-input%E6%96%B0%E5%A2%9E%E7%9A%84type%E5%B1%9E%E6%80%A7%E5%80%BC"><span class="toc-number">15.5.2.</span> <span class="toc-text">5.2 input新增的type属性值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-3form%E6%A0%87%E7%AD%BE%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="toc-number">15.5.3.</span> <span class="toc-text">5.3form标签新增属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E8%A7%86%E9%A2%91%E6%A0%87%E7%AD%BE"><span class="toc-number">15.6.</span> <span class="toc-text">新增视频标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E9%9F%B3%E9%A2%91%E6%A0%87%E7%AD%BE"><span class="toc-number">15.7.</span> <span class="toc-text">新增音频标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-number">15.8.</span> <span class="toc-text">新增全局属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86"><span class="toc-number">15.9.</span> <span class="toc-text">兼容性处理</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81CSS3%E7%AE%80%E4%BB%8B"><span class="toc-number">16.</span> <span class="toc-text">三、CSS3简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E6%A6%82%E8%BF%B0"><span class="toc-number">16.1.</span> <span class="toc-text">1.CSS概述</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-CSS3%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.</span> <span class="toc-text">2.CSS3私有前缀</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1%E4%BB%80%E4%B9%88%E6%98%AF%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.1.</span> <span class="toc-text">2.1什么是私有前缀</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.2.</span> <span class="toc-text">2.2为什么要有私有前缀</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3%E5%B8%B8%E7%94%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.3.</span> <span class="toc-text">2.3常用浏览器私有前缀</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%B0%E5%A2%9E%E9%95%BF%E5%BA%A6%E5%8D%95%E4%BD%8D"><span class="toc-number">16.3.</span> <span class="toc-text">3.新增长度单位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%B0%E5%A2%9E%E9%A2%9C%E8%89%B2%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F"><span class="toc-number">16.4.</span> <span class="toc-text">4.新增颜色设置方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%B0%E5%A2%9E%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">16.5.</span> <span class="toc-text">5.新增选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E6%96%B0%E5%A2%9E%E7%9B%92%E5%AD%90%E5%B1%9E%E6%80%A7"><span class="toc-number">16.6.</span> <span class="toc-text">6.新增盒子属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#6-1-box-sizing%E6%80%AA%E5%BC%82%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">16.6.1.</span> <span class="toc-text">6.1 box-sizing怪异盒模型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-2resize%E8%B0%83%E6%95%B4%E7%9B%92%E5%AD%90%E5%A4%A7%E5%B0%8F"><span class="toc-number">16.6.2.</span> <span class="toc-text">6.2resize调整盒子大小</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-3-box-shadow%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1"><span class="toc-number">16.6.3.</span> <span class="toc-text">6.3 box-shadow盒子阴影</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-4-opacity%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6"><span class="toc-number">16.7.</span> <span class="toc-text">6.4 opacity不透明度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E6%96%B0%E5%A2%9E%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7"><span class="toc-number">16.8.</span> <span class="toc-text">7.新增背景属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#7-1-background-origin"><span class="toc-number">16.8.1.</span> <span class="toc-text">7.1 background-origin</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-2-background-clip"><span class="toc-number">16.8.2.</span> <span class="toc-text">7.2 background-clip</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-3-background-size"><span class="toc-number">16.8.3.</span> <span class="toc-text">7.3 background-size</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-4-background-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.8.4.</span> <span class="toc-text">7.4 background 复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-5%E5%A4%9A%E8%83%8C%E6%99%AF%E5%9B%BE"><span class="toc-number">16.8.5.</span> <span class="toc-text">7.5多背景图</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%96%B0%E5%A2%9E%E8%BE%B9%E6%A1%86%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">16.9.</span> <span class="toc-text">8.新增边框相关属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#8-1-%E8%BE%B9%E6%A1%86%E5%9C%86%E8%A7%92"><span class="toc-number">16.9.1.</span> <span class="toc-text">8.1 边框圆角</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8-2-%E8%BE%B9%E6%A1%86%E5%A4%96%E8%BD%AE%E5%BB%93"><span class="toc-number">16.9.2.</span> <span class="toc-text">8.2 边框外轮廓</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E6%96%B0%E5%A2%9E%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7"><span class="toc-number">16.10.</span> <span class="toc-text">9.新增文本属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#9-1%E6%96%87%E6%9C%AC%E9%98%B4%E5%BD%B1"><span class="toc-number">16.10.1.</span> <span class="toc-text">9.1文本阴影</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-2%E6%96%87%E6%9C%AC%E6%8D%A2%E8%A1%8C"><span class="toc-number">16.10.2.</span> <span class="toc-text">9.2文本换行</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-3%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA"><span class="toc-number">16.10.3.</span> <span class="toc-text">9.3文本溢出</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-4%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0"><span class="toc-number">16.10.4.</span> <span class="toc-text">9.4文本修饰</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-5%E6%96%87%E6%9C%AC%E6%8F%8F%E8%BE%B9"><span class="toc-number">16.10.5.</span> <span class="toc-text">9.5文本描边</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E6%96%B0%E5%A2%9E%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.</span> <span class="toc-text">10.新增渐变</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#10-1%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.1.</span> <span class="toc-text">10.1线性渐变</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-2%E5%BE%84%E5%90%91%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.2.</span> <span class="toc-text">10.2径向渐变</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-3%E9%87%8D%E5%A4%8D%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.3.</span> <span class="toc-text">10.3重复渐变</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-web%E5%AD%97%E4%BD%93"><span class="toc-number">16.12.</span> <span class="toc-text">11.web字体</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-2D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.13.</span> <span class="toc-text">12.2D变换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#12-1%E5%8F%98%E6%8D%A2%E4%BD%8D%E7%A7%BB"><span class="toc-number">16.13.1.</span> <span class="toc-text">12.1变换位移</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-2%E5%8F%98%E6%8D%A2%E7%BC%A9%E6%94%BE"><span class="toc-number">16.13.2.</span> <span class="toc-text">12.2变换缩放</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-3%E5%8F%98%E6%8D%A2%E6%97%8B%E8%BD%AC"><span class="toc-number">16.13.3.</span> <span class="toc-text">12.3变换旋转</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-4%E5%8F%98%E6%8D%A2%E6%89%AD%E6%9B%B2"><span class="toc-number">16.13.4.</span> <span class="toc-text">12.4变换扭曲</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-5%E5%A4%9A%E9%87%8D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.13.5.</span> <span class="toc-text">12.5多重变换</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-6%E5%8F%98%E6%8D%A2%E5%8E%9F%E7%82%B9"><span class="toc-number">16.13.6.</span> <span class="toc-text">12.6变换原点</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-3D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.14.</span> <span class="toc-text">13.3D变换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#13-1%E7%A9%BA%E9%97%B4%E4%B8%8E%E6%99%AF%E6%B7%B1"><span class="toc-number">16.14.1.</span> <span class="toc-text">13.1空间与景深</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-2%E9%80%8F%E8%A7%86%E7%82%B9%E4%BD%8D%E7%BD%AE"><span class="toc-number">16.14.2.</span> <span class="toc-text">13.2透视点位置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-3-%E4%BD%8D%E7%A7%BB"><span class="toc-number">16.14.3.</span> <span class="toc-text">13.3 位移</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-4%E6%97%8B%E8%BD%AC"><span class="toc-number">16.14.4.</span> <span class="toc-text">13.4旋转</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-5%E7%BC%A9%E6%94%BE"><span class="toc-number">16.14.5.</span> <span class="toc-text">13.5缩放</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-6%E5%A4%9A%E9%87%8D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.14.6.</span> <span class="toc-text">13.6多重变换</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E8%BF%87%E6%B8%A1"><span class="toc-number">16.15.</span> <span class="toc-text">14.过渡</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#14-1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">16.15.1.</span> <span class="toc-text">14.1 基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14-2%E9%AB%98%E7%BA%A7%E4%BD%BF%E7%94%A8"><span class="toc-number">16.15.2.</span> <span class="toc-text">14.2高级使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14-3-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.15.3.</span> <span class="toc-text">14.3 复合属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E5%8A%A8%E7%94%BB"><span class="toc-number">16.16.</span> <span class="toc-text">15.动画</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#15-1%E5%B8%A7"><span class="toc-number">16.16.1.</span> <span class="toc-text">15.1帧</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-2%E5%8A%A8%E7%94%BB%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">16.16.2.</span> <span class="toc-text">15.2动画的基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-3%E5%8A%A8%E7%94%BB%E5%85%B6%E4%BB%96%E5%B1%9E%E6%80%A7"><span class="toc-number">16.16.3.</span> <span class="toc-text">15.3动画其他属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-4%E5%8A%A8%E7%94%BB%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.16.4.</span> <span class="toc-text">15.4动画复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-5%E5%8A%A8%E7%94%BB%E5%92%8C%E8%BF%87%E6%B8%A1%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">16.16.5.</span> <span class="toc-text">15.5动画和过渡的区别</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80"><span class="toc-number">16.17.</span> <span class="toc-text">16.多列布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-%E4%BC%B8%E7%BC%A9%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">16.18.</span> <span class="toc-text">17.伸缩盒模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#17-1-%E4%BC%B8%E7%BC%A9%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B"><span class="toc-number">16.18.1.</span> <span class="toc-text">17.1 伸缩盒模型简介</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-2-%E4%BC%B8%E7%BC%A9%E5%AE%B9%E5%99%A8%E4%B8%8E%E4%BC%B8%E7%BC%A9%E9%A1%B9%E7%9B%AE"><span class="toc-number">16.18.2.</span> <span class="toc-text">17.2 伸缩容器与伸缩项目</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-3%E4%B8%BB%E8%BD%B4%E6%96%B9%E5%90%91"><span class="toc-number">16.18.3.</span> <span class="toc-text">17.3主轴方向</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-4%E4%B8%BB%E8%BD%B4%E6%8D%A2%E8%A1%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">16.18.4.</span> <span class="toc-text">17.4主轴换行方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-5-flex-flow"><span class="toc-number">16.18.5.</span> <span class="toc-text">17.5 flex-flow</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-6%E4%B8%BB%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">16.18.6.</span> <span class="toc-text">17.6主轴对齐方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-7-%E4%BE%A7%E8%BD%B4%E5%AF%B9%E9%BD%90"><span class="toc-number">16.18.7.</span> <span class="toc-text">17.7 侧轴对齐</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-8%E9%A1%B9%E7%9B%AE%E5%9C%A8%E4%B8%BB%E8%BD%B4%E7%9A%84%E5%9F%BA%E5%87%86%E9%95%BF%E5%BA%A6"><span class="toc-number">16.18.8.</span> <span class="toc-text">17.8项目在主轴的基准长度</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-9-%E4%BC%B8%E7%BC%A9%E6%80%A7"><span class="toc-number">16.18.9.</span> <span class="toc-text">17.9 伸缩性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-10-flex-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.18.10.</span> <span class="toc-text">17.10**flex**复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-11%E9%A1%B9%E7%9B%AE%E6%8E%92%E5%BA%8F%E4%B8%8E%E5%8D%95%E7%8B%AC%E5%AF%B9%E9%BD%90"><span class="toc-number">16.18.11.</span> <span class="toc-text">17.11项目排序与单独对齐</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80"><span class="toc-number">16.19.</span> <span class="toc-text">18.响应式布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-BFC%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89"><span class="toc-number">16.20.</span> <span class="toc-text">19.BFC（重要）</span></a></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        css
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">云雪</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2023-08-02T02:05:45.000Z" itemprop="datePublished">2023-08-02</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/html/">html</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/html/" rel="tag">html</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h3 id="一、CSS基础"><a href="#一、CSS基础" class="headerlink" title="一、CSS基础"></a>一、CSS基础</h3><h4 id="1-CSS简介"><a href="#1-CSS简介" class="headerlink" title="1.CSS简介"></a>1.CSS简介</h4><ul>
<li>CSS的全称：层叠样式表<code>Cascading Style Sheets</code></li>
<li>CSS也是一种标记语言，用于给<code>HTML</code>结构设置样式，例如：文字大小、颜色、元素宽度高等等</li>
</ul>
<blockquote>
<p>简单理解：CSS可以美化HTML,让HTML更漂亮</p>
<p>核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式的分离 </p>
</blockquote>
<h4 id="2-CSS的编写位置"><a href="#2-CSS的编写位置" class="headerlink" title="2.CSS的编写位置"></a>2.CSS的编写位置</h4><h5 id="行内样式"><a href="#行内样式" class="headerlink" title="行内样式"></a>行内样式</h5><ul>
<li><p>写在标签的<code>style</code>属性中,(又称：内联样式)</p>
</li>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">h1</span> style = &quot;<span class="attribute">color</span> = red; <span class="attribute">font-size</span> = <span class="number">60px</span>&quot;&gt;欢迎你&lt;/<span class="selector-tag">h1</span>&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意点：</p>
<blockquote>
<ol>
<li><code>style</code>属性的值不能随便写，写要符合<code>CSS</code>语法规范，是<code>名:值;</code>的形式</li>
<li>行内样式表，只能控制当前标签的样式，对其他样式标签无效</li>
</ol>
</blockquote>
</li>
<li><p>存在的问题：</p>
<blockquote>
<p>书写繁琐，样式不能复用，并且没有体现出：<code>结构与样式分离</code>的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用</p>
</blockquote>
</li>
</ul>
<h5 id="内部样式"><a href="#内部样式" class="headerlink" title="内部样式"></a>内部样式</h5><ul>
<li><p>写在<code>html</code>页面内部，将所有的<code>CSS</code>代码提取出来，单独放在<code>&lt;style&gt;</code>标签中</p>
</li>
<li><p>语法:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">h1</span>&#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>:red;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">font-size</span>:<span class="number">40px</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>注意点：</p>
<blockquote>
<ol>
<li><code>&lt;style&gt;</code>标签理论上可以放在<code>HTML</code>文档的任何地方，但一般都放在<code>&lt;head&gt;</code>标签中</li>
<li>此种写法：样式可以复用，代码结构清晰</li>
</ol>
</blockquote>
</li>
<li><p>存在的问题：</p>
<blockquote>
<ol>
<li>并没有实现：结构和样式完全分离</li>
<li>多个<code>HTML</code>页面无法复用样式</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="外部样式"><a href="#外部样式" class="headerlink" title="外部样式"></a>外部样式</h5><ul>
<li><p>写在单独的<code>.css</code>文件中，随后在<code>HTML</code>文件中引入使用</p>
</li>
<li><p>语法：</p>
<ul>
<li><p>新建一个扩展名为<code>.css</code>的样式文件，把所有<code>CSS</code>代码都放入此文件中</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">      <span class="attribute">color</span>:red;</span><br><span class="line">      <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在<code>HTML</code>文件中引入<code>.css</code>文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span> = <span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span> = <span class="string">&quot;./xxx.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>注意：</p>
</li>
</ul>
<blockquote>
<ol>
<li><link>标签要写在<head>标签中</li>
<li><link>标签属性说明
1. `href`：引入的文档来自哪里
2. `rel`：(relation：关系)说明引入的文档与当前文档之间的关系</li>
<li>外部样式的优势：样式可以复用，结构庆幸，可触发浏览器的缓存机制，提高访问速度，实现了<strong>结构与样式完全分离</strong></li>
<li>实际开发中，几乎都使用外部样式，这是<strong>最推荐的使用方式！</strong></li>
</ol>
</blockquote>
<h4 id="3-样式表的优先级"><a href="#3-样式表的优先级" class="headerlink" title="3.样式表的优先级"></a>3.样式表的优先级</h4><ul>
<li><p>优先级规则：<strong>行内样式 &gt; 内部样式 &#x3D; 外部样式</strong></p>
<blockquote>
<ol>
<li>内部样式、外部样式，这二者优先级相同，且：后面的会覆盖前面的（简记：“后来者居上”）</li>
<li>同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来者居上”）</li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="4-语法规范"><a href="#4-语法规范" class="headerlink" title="4.语法规范"></a>4.语法规范</h4><p><code>CSS</code>语法由两部分构成：</p>
<ul>
<li><p>选择器：找到要添加样式的元素</p>
</li>
<li><p>声明</p>
</li>
<li><p>块：设置具体的样式(声明块是由一个或多个声明组成的)，声明的格式为：<code>属性名:属性值;</code></p>
<blockquote>
<p>备注1：最后一个声明后的分号理论上能省略，但最好还是写上</p>
<p>备注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上</p>
</blockquote>
</li>
</ul>
<h4 id="5-CSS代码风格"><a href="#5-CSS代码风格" class="headerlink" title="5.CSS代码风格"></a>5.CSS代码风格</h4><ul>
<li><p>展开风格 – – 开发时推荐，便于维护和调试</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>紧凑风格 – – 项目上线时推荐，可以减少文件体积</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;<span class="attribute">color</span>:red; <span class="attribute">font-size</span>:<span class="number">40px</span>; &#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<p>备注：</p>
<blockquote>
<p>项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减少文件体积，节约网络流量，同时也让用户打开网页时速度更快</p>
</blockquote>
<h3 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h3><h4 id="基本选择器包括："><a href="#基本选择器包括：" class="headerlink" title="基本选择器包括："></a>基本选择器包括：</h4><blockquote>
<ol>
<li>通配选择器</li>
<li>元素选择器</li>
<li>类选择器</li>
<li>id选择器</li>
</ol>
</blockquote>
<h5 id="通配选择器"><a href="#通配选择器" class="headerlink" title="通配选择器"></a>通配选择器</h5><ul>
<li><p>作用：可以选中所以的<code>HTML</code>元素</p>
</li>
<li><p>语法：</p>
<p><code>*&#123;属性名:属性值;&#125;</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line">	<span class="comment">/* 选中所有元素 */</span></span><br><span class="line">    <span class="attribute">color</span>:orange;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<blockquote>
<p>备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助，后面会详细讲</p>
</blockquote>
<h5 id="元素选择器"><a href="#元素选择器" class="headerlink" title="元素选择器"></a>元素选择器</h5><ul>
<li><p>作用：为页面中某种元素<strong>统一设置样式</strong></p>
</li>
<li><p>语法：<code>标签名&#123; 属性名:属性值;&#125;</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*选中所有h1元素*/</span></span><br><span class="line">  <span class="selector-tag">h1</span>&#123;</span><br><span class="line">        <span class="attribute">color</span>:red;</span><br><span class="line">        <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的&#96;&#96;h1&#96;元素效果都一样</p>
</blockquote>
</li>
</ul>
<h5 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h5><ul>
<li><p>作用：根据元素的<code>class</code>值，来选中某些元素</p>
<blockquote>
<p><code>class</code>翻译过来有：<strong>种类</strong>、<strong>类别</strong>的含义，所以<code>class</code>值，又称：类名</p>
</blockquote>
</li>
<li><p>语法：<code>.类名&#123;属性名:属性值;&#125;</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*选中所有class值为speak的元素*/</span></span><br><span class="line"><span class="selector-class">.speak</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意点</p>
<blockquote>
<ol>
<li><p>元素的<code>class</code>属性值不带<code>.</code>,但CSS类选择器要带<code>.</code></p>
</li>
<li><p><code>class</code>值是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用<code>-</code>做连接，例如：<code>left-menu</code>，且命名要有意义，做到“见名知意”</p>
</li>
<li><p>一个元素不要写多个<code>class</code>属性，，但能写多个值，要用空格隔开，例如：</p>
<p><code>&lt;h1 class = &quot;speak big&quot;&gt;你好啊&lt;/h1&gt;</code></p>
</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h5><ul>
<li><p>作用：根据元素的id属性值，来精准的选中某个元素</p>
</li>
<li><p>语法：<code>#id值&#123;属性名:属性值&#125;</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*选中所有id值为speak的元素*/</span></span><br><span class="line"><span class="selector-id">#speak</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">60px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<ul>
<li><code>id</code>属性值：尽量由字母、数字、下划线、短杆组成，最好以字母开头，不要包含空格、区分大小写</li>
<li>一个元素只能拥有一个<code>id</code>属性，多个元素的<code>id</code>属性值不能相同</li>
<li>一个元素可以同时拥有<code>id</code>和<code>class</code>属性</li>
</ul>
</li>
</ul>
<h4 id="复合选择器"><a href="#复合选择器" class="headerlink" title="复合选择器"></a>复合选择器</h4><h5 id="交集选择器"><a href="#交集选择器" class="headerlink" title="交集选择器"></a>交集选择器</h5><ul>
<li><p>作用：选中<strong>同时符合</strong>多个条件的元素</p>
<blockquote>
<p>交集有<strong>并且</strong>的含义(通俗理解：<strong>即</strong>….<strong>又</strong>….的意思)，例如：年轻且长得帅</p>
</blockquote>
</li>
<li><p>语法：<code>选择器1选择器2选择器3…选择器n&#123;&#125;</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*选中所有class值为speak的p元素*/</span></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.speak</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<blockquote>
<ol>
<li>有标签名，标签名必须写在前面</li>
<li>id选择器，理论上可以作为交集的条件，但实际应用中几乎不用 – – 因为没有意义</li>
<li>交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是<code>p</code>元素又是<code>span</code>元素</li>
<li>用的最多的交集选择器是：元素选择器配合类名选择器，例如：<code>p.beauty</code></li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="并集选择器"><a href="#并集选择器" class="headerlink" title="并集选择器"></a>并集选择器</h5><ul>
<li><p>作用：选中多个选择器对应的元素，又称：<code>分组选择器</code></p>
<blockquote>
<p>所谓并集就是或者的含义(通俗理解：要么…..要么….的意思)，例如：给我转10万块钱或者我报警</p>
</blockquote>
</li>
<li><p>语法：<code>选择器1,选择器2,选择器3,…选择器n&#123;&#125;</code></p>
<blockquote>
<p>多个选择器通过<code>,</code>连接，此处的含义就是：*<em>或</em></p>
</blockquote>
</li>
<li><p>举例</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#peiqi</span>,</span><br><span class="line"><span class="selector-class">.rich</span>,</span><br><span class="line"><span class="selector-class">.beauty</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>:skyblue;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<blockquote>
<ol>
<li>并集选择器，我们一般竖着写</li>
<li>任何形式的选择器，都可以作为并集选择器的一部分</li>
<li>并集选择器，通常用于集体声明，可以缩小样式表体积。</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h5><ul>
<li><p>作用：选中指定元素，符合要求的后代元素</p>
</li>
<li><p>语法：<code>选择器1 选择器2 选择器3 …选择器n &#123;&#125;</code>（先写祖先，再写后代）</p>
<blockquote>
<p>选择器之间，用空格隔开，空格可以理解为：<code>&quot;xxxx中的&quot;</code>，其实就是后代的意思</p>
<p>选择器1，2，3….n，可以是我们之前学的任何一种选择器</p>
</blockquote>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.subject</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:bule;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 选中类名为subject元素中的所有类名为front-end的li元素 */</span></span><br><span class="line"><span class="selector-class">.subject</span> <span class="selector-tag">li</span><span class="selector-class">.front-end</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="子代选择器"><a href="#子代选择器" class="headerlink" title="子代选择器"></a>子代选择器</h5><ul>
<li><p>作用：选中指定元素中，符合要求的&#96;&#96;子元素&#96;（先写父，再写子）</p>
<blockquote>
<p>子代选择器又称：子元素选择器、子选择器</p>
</blockquote>
</li>
<li><p>语法：<code>选择器1&gt;选择器2&gt;选择器3&gt;…选择器n &#123;&#125;</code></p>
<blockquote>
<p>选择器之间，用&gt;隔开，&gt;可以理解为：<code>xxx的子代</code>,其实就是儿子的意思</p>
<p>选择器1，2，3….n，可以是我们之间学的任何一种选择器</p>
</blockquote>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*div中的子代a元素*/</span></span><br><span class="line"><span class="selector-tag">div</span>&gt;<span class="selector-tag">a</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<blockquote>
<ol>
<li>子代选择器，最终选择的是子代，不是父级</li>
<li>子、孙子、重孙子、重重孙子……<strong>统称后代！</strong>，子就是值儿子</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="兄弟选择器"><a href="#兄弟选择器" class="headerlink" title="兄弟选择器"></a>兄弟选择器</h5><ul>
<li><h6 id="相邻兄弟选择器："><a href="#相邻兄弟选择器：" class="headerlink" title="相邻兄弟选择器："></a>相邻兄弟选择器：</h6><ul>
<li><p>作用：选中指定元素后，符合条件的<strong>相邻兄弟</strong>元素</p>
<blockquote>
<p>所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟</p>
</blockquote>
</li>
<li><p>语法：<code>选择器1+选择器2 &#123;&#125;</code></p>
</li>
<li><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*div中的兄弟p元素*/</span></span><br><span class="line"><span class="selector-tag">div</span>+<span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><h6 id="通用兄弟选择器："><a href="#通用兄弟选择器：" class="headerlink" title="通用兄弟选择器："></a>通用兄弟选择器：</h6><ul>
<li><p>作用：选择指定元素后，符合条件的<strong>所有兄弟</strong>元素</p>
<blockquote>
<p>简记：睡在我下铺的所有兄弟</p>
</blockquote>
</li>
<li><p>语法：<code>选择器1~选择器2&#123;&#125;</code></p>
</li>
<li><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*div中的兄弟p元素*/</span></span><br><span class="line"><span class="selector-tag">div</span>~<span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>注意：</p>
<blockquote>
<p>两种兄弟选择器，选择的是下面的兄弟</p>
</blockquote>
</li>
</ul>
<h5 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h5><ul>
<li>作用：选中属性值符合一定要求的元素</li>
<li>语法：<ul>
<li><code>[属性名]</code>选中具有某个属性的元素</li>
<li><code>[属性名 = “值”]</code>选中包含某个属性，且属性值等于指定值的元素</li>
<li><code>[属性名^=“值” ]</code>选中包含某个属性，且属性值以指定的值开头的元素</li>
<li><code>[属性名$= “值”]</code>选中包含某个属性，且属性值以指定的值结尾的元素</li>
<li><code>[属性名*= “值”]</code>选中包含某个属性，属性值包含指定值的元素</li>
</ul>
</li>
<li>示例：</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[title]</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h5><ul>
<li><p>作用：选中特殊状态的元素</p>
<blockquote>
<p>如何理解“伪”?— — 虚假的，不是真的</p>
<p>如何理解“伪类”？— — 像类(class)，但不是类，是<strong>元素的一种特殊状态</strong></p>
</blockquote>
</li>
</ul>
<h6 id="常用的伪类动态选择器："><a href="#常用的伪类动态选择器：" class="headerlink" title="常用的伪类动态选择器："></a>常用的伪类动态选择器：</h6><ul>
<li><p><code>:link</code> 超链接未被访问的状态</p>
</li>
<li><p><code>:visited</code> 超链接访问过的状态</p>
</li>
<li><p><code>:hover</code> 鼠标悬停在元素上的状态</p>
</li>
<li><p><code>:active</code> 元素激活的状态</p>
<blockquote>
<p>什么是激活？ – – 按下鼠标不松开</p>
<p>注意点：遵循LVHA顺序，即：<code>link</code>、<code>visted</code>、<code>hover</code>、<code>active</code></p>
</blockquote>
</li>
<li><p><code>:focus</code> 获取焦点的元素</p>
<blockquote>
<p>表单类元素才能使用<code>:foucs</code>伪类</p>
<p>当用户：点击元素、或通过键盘的tab键等方式，选择元素时，就是获取焦点</p>
</blockquote>
</li>
</ul>
<h6 id="结构伪类"><a href="#结构伪类" class="headerlink" title="结构伪类"></a>结构伪类</h6><ul>
<li><p>常用的：</p>
<ul>
<li><code>:first-child</code> ：所有兄弟元素中的第一个</li>
<li><code>:last-child</code> ：所有兄弟元素中的最后一个</li>
<li><code>:nth-child</code> ：所有兄弟元素中的等n个</li>
<li><code>:first-of-type</code>：所有同类型兄弟元素中的第一个</li>
<li><code>:last-of-type</code>：所有同类型兄弟元素中的最后一个</li>
<li><code>:nth-of-type(n)</code>：所有同类型兄弟元素中的第n个</li>
</ul>
</li>
<li><p>关于n的值</p>
<blockquote>
<ol>
<li>0或不写：什么都选不中 – – 几乎不用</li>
<li>n：选中所有子元 – – 几乎不用</li>
<li>1~正无穷的整数：选中对应序号的子元素</li>
<li>2n或even：选中序号为偶数的子元素</li>
<li>2n+1或odd：选中序号为奇数的子元素</li>
<li>-n+3：选中的是前3个</li>
</ol>
</blockquote>
</li>
<li><p>不常用的：</p>
<ul>
<li><code>:nth-last-child(n)</code>：所有兄弟中的<strong>倒数第n个</strong></li>
<li><code>:nth-last-of-type(n)</code>：所有同类型兄弟元素中的<strong>倒数第n个</strong></li>
<li><code>:only-child</code>：选中没有兄弟的元素**(独生子女)**</li>
<li><code>:only-of-type</code>：选择没有同类型兄弟的元素</li>
<li><code>:root</code>：根元素</li>
<li><code>:empty</code>：内容为空元素(<strong>空格也算内容)</strong></li>
</ul>
</li>
</ul>
<h6 id="否定伪类"><a href="#否定伪类" class="headerlink" title="否定伪类"></a>否定伪类</h6><ul>
<li><code>:not(选择器)</code> 排除满足括号中条件的元素</li>
</ul>
<h6 id="UI伪类"><a href="#UI伪类" class="headerlink" title="UI伪类"></a>UI伪类</h6><ul>
<li><code>:checked</code>：被选中的复选框或者单选框</li>
<li><code>:enable</code>：可用的表单元素（没有disabled属性）</li>
<li><code>disabled</code>：不可用的表单元素（有disabled属性）</li>
</ul>
<h6 id="目标伪类"><a href="#目标伪类" class="headerlink" title="目标伪类"></a>目标伪类</h6><ul>
<li><code>:target</code>：选中锚点指向的元素</li>
</ul>
<h6 id="语言伪类"><a href="#语言伪类" class="headerlink" title="语言伪类"></a>语言伪类</h6><ul>
<li><code>:lang(en)</code>：根据指定的语言选择元素（本质是看<code>lang属性</code>的值）</li>
</ul>
<h5 id="伪元素选择器"><a href="#伪元素选择器" class="headerlink" title="伪元素选择器"></a>伪元素选择器</h5><ul>
<li><p>作用：选中元素中的一些特殊位置</p>
</li>
<li><p>常用伪元素：</p>
<ul>
<li><p><code>::first-letter</code>：选中元素中的<strong>第一个文字</strong></p>
</li>
<li><p><code>::first-line</code>：选中元素中的<strong>第一行文字</strong></p>
</li>
<li><p><code>::selection</code>：选中<strong>被鼠标选中</strong>的内容</p>
</li>
<li><p><code>::placeholder</code>：选中<strong>输入框的提示文字</strong></p>
</li>
<li><p><code>::before</code>：在元素最开始的位置，创建一个子元素<strong>（必须用content属性指定内容）</strong></p>
</li>
<li><p><code>::after</code>：在元素最后的位置，创建一个子元素<strong>（content属性所指定内容）</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::before</span>&#123;</span><br><span class="line">	<span class="attribute">content</span>:￥; //用<span class="attribute">content</span>属性指定内容</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">P</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:.<span class="number">00</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="选择器优先级"><a href="#选择器优先级" class="headerlink" title="选择器优先级"></a>选择器优先级</h4><ul>
<li><p>通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突，到底要应用那个样式，此时就需要看优先级了</p>
</li>
<li><p>简单描述：</p>
<blockquote>
<p>ID选择器&gt;类选择器&gt;元素选择器&gt;通配选择器 </p>
</blockquote>
</li>
<li><p>详细描述</p>
<blockquote>
<ol>
<li><p>计算方式：每个选择器，都可以计算出一组权重，格式为：(a,b,c)</p>
</li>
<li><p>格式：(a,b,c)</p>
<p>a：ID选择器的个数</p>
<p>b：类、伪类、属性、选择器的个数</p>
<p>c：元素、伪元素选择器的个数</p>
</li>
<li><p>比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：</p>
<p>(1,0,0)&gt;(0,2,2)</p>
<p>(1,1,0)&gt;(1,0,3)</p>
<p>(1,1,3)&gt;(1,1,2)</p>
</li>
</ol>
</blockquote>
</li>
<li><p>特殊规则：</p>
<blockquote>
<ul>
<li>行内样式权重大于所有选择器</li>
<li><strong>!important</strong>的权重，大于行内样式，大于所有选择器，权重最高！</li>
</ul>
</blockquote>
</li>
</ul>
<h3 id="CSS三大特性"><a href="#CSS三大特性" class="headerlink" title="CSS三大特性"></a>CSS三大特性</h3><h4 id="1-层叠性"><a href="#1-层叠性" class="headerlink" title="1.层叠性"></a>1.层叠性</h4><ul>
<li><p>概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）</p>
<blockquote>
<p>什么是样式冲突？ – – <strong>元素的同一个样式名，被设置了不同的值，就是样式冲突</strong></p>
</blockquote>
</li>
</ul>
<h4 id="2-继承性"><a href="#2-继承性" class="headerlink" title="2.继承性"></a>2.继承性</h4><ul>
<li><p>概念：元素会自动拥有<strong>其父元素</strong>，或其<strong>祖先元素</strong>上所设置的<strong>某些样式</strong></p>
</li>
<li><p>规则：<strong>优先继承离的近的</strong></p>
</li>
<li><p>常见的可继承属性：</p>
<blockquote>
<p><strong>text-??，font-??，line-??，color…..</strong></p>
</blockquote>
</li>
<li><p>备注：参照MDN网站，可查询属性是否可以被继承</p>
</li>
</ul>
<h4 id="3-优先级"><a href="#3-优先级" class="headerlink" title="3.优先级"></a>3.优先级</h4><ul>
<li><p>简单聊：<code>!important</code> <strong>&gt; 行内样式&gt;ID选择器&gt;类选择器&gt;元素选择器&gt;通配选择器&gt;继承的样式</strong></p>
</li>
<li><p>详细聊：需要计算权重</p>
<blockquote>
<p>计算权重时需要注意：并集选择器的每一个部分都是分开算的！</p>
</blockquote>
</li>
</ul>
<h3 id="CSS颜色"><a href="#CSS颜色" class="headerlink" title="CSS颜色"></a>CSS颜色</h3><h4 id="颜色的表示"><a href="#颜色的表示" class="headerlink" title="颜色的表示"></a>颜色的表示</h4><h5 id="表达方式一：颜色名"><a href="#表达方式一：颜色名" class="headerlink" title="表达方式一：颜色名"></a>表达方式一：颜色名</h5><ul>
<li><p>编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：</p>
<ul>
<li><p>红色：red</p>
</li>
<li><p>绿色：green</p>
</li>
<li><p>蓝色：blue</p>
</li>
<li><p>紫色：purple</p>
</li>
<li><p>橙色：orange</p>
</li>
<li><p>灰色：gray</p>
<p>……</p>
</li>
</ul>
<blockquote>
<ol>
<li>颜色名这种方式，表达的颜色比较单一，所有用的并不多</li>
<li>具体颜色名参考<code>MDN</code>官方文档</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="表达方式二：rgb-或-rgba"><a href="#表达方式二：rgb-或-rgba" class="headerlink" title="表达方式二：rgb 或 rgba"></a>表达方式二：<code>rgb</code> 或 <code>rgba</code></h5><ul>
<li><p>编写方式：使用<strong>红</strong>、<strong>黄</strong>、<strong>蓝</strong>这三种原色进行组合</p>
<ul>
<li>r：表示<font color=red>红色</font></li>
<li>g：表示<font color=green>绿色</font></li>
<li>b：表示<font color=blue>蓝色</font></li>
<li>a：表示透明度</li>
</ul>
</li>
<li><p>举例：</p>
<blockquote>
<p><code>color：rgb(255,0,0) 红色</code></p>
<p><code>color：rgb(0,255,0) 绿色</code></p>
<p><code>color：rgb(0,0,255) 蓝色</code></p>
<p><code>color：rgb(255,255,255) 白色</code></p>
</blockquote>
</li>
</ul>
<h5 id="表达方式三：HEX或HEXA"><a href="#表达方式三：HEX或HEXA" class="headerlink" title="表达方式三：HEX或HEXA"></a>表达方式三：HEX或HEXA</h5><p><code>HEX</code>的原理与<code>rgb</code>一样，依然是通过红色，绿色，蓝色进行组合，只不过要用<strong>6个数字</strong>，<strong>分成3组</strong>来表达</p>
<ul>
<li><p>格式为：<code>#rrggbb</code></p>
<blockquote>
<p>每一位数字的取值范围是：0~f，即：（0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f）</p>
<p>所以每一种光的最小值是：00，最大值是：ff</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">color</span>:<span class="number">#ff0000</span>; <span class="comment">/* 红色*/</span></span><br><span class="line"><span class="attribute">color</span>:<span class="number">#00ff00</span>;</span><br><span class="line"><span class="attribute">color</span>:<span class="number">#0000ff</span>;</span><br><span class="line"><span class="attribute">color</span>:<span class="number">#000000</span>;</span><br><span class="line"><span class="attribute">color</span>:<span class="number">#ffffff</span>;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意点：IE浏览器不支持<code>HEXA</code>,但支持<code>HEX</code></p>
</blockquote>
</li>
</ul>
<h5 id="表达方式四：HSL或HSLA"><a href="#表达方式四：HSL或HSLA" class="headerlink" title="表达方式四：HSL或HSLA"></a>表达方式四：HSL或HSLA</h5><ul>
<li>HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：<code>hsl(色相，饱和度，亮度)</code><ul>
<li>色相：取值范围是<strong>0~360度</strong></li>
<li>饱和度：取值范围是**0%~100%**（向色相中对应颜色添加灰色，0%全灰，100%没有灰）</li>
<li>亮度：取值范围是<strong>0%~100%</strong>    （0%亮度没了，所以就是黑色，100%亮度太强了，所以就是白色了）</li>
</ul>
</li>
<li><strong>HSLA</strong>其实就是在<strong>HSL</strong>的基础上，添加了透明度</li>
</ul>
<h3 id="CSS常见字体属性"><a href="#CSS常见字体属性" class="headerlink" title="CSS常见字体属性"></a>CSS常见字体属性</h3><h4 id="1-字体大小"><a href="#1-字体大小" class="headerlink" title="1.字体大小"></a>1.字体大小</h4><ul>
<li><p>属性名：<code>font-size</code></p>
</li>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">40px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意点：</p>
<blockquote>
<ol>
<li><code>Chrome</code>浏览器支持的最小文字为<code>12px</code>，默认的文字大小为<code>16px</code>，并且<code>0px</code>会自动消失</li>
<li>不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小</li>
<li>通常以给<code>body</code>设置<code>font-size</code>属性，这样<code>body</code>中的其他元素就都可以继承了</li>
</ol>
</blockquote>
</li>
<li><p><strong>补充点：</strong></p>
<blockquote>
<ol>
<li>由于字体设计原因，文字最终呈现大小，并不一定与font-size的值一致，可能大，也可能小，例如：font-size设为40px，最终呈现的文字，可能比40px大，也可能比40px小</li>
<li>通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些</li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="2-字体族"><a href="#2-字体族" class="headerlink" title="2.字体族"></a>2.字体族</h4><ul>
<li><p>属性名：<code>font-family</code></p>
</li>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">font-family</span>:<span class="string">&quot;STCaiyun&quot;</span>,<span class="string">&quot;Microsoft YaHei&quot;</span>,sans-serif</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<blockquote>
<ol>
<li>使用<strong>字体的英文名字兼容性会更好</strong>，具体的英文名可以自行查询，或在电脑的设置里去寻找</li>
<li><strong>如果字体名包含空格，必须使用引号包裹起来</strong></li>
<li>可以设置多个字体，安装从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上<code>serif（衬线字体）</code>或<code>sans-serif（非衬线字体）</code></li>
<li>在<code>window</code>系统中，默认字体是微软雅黑</li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="3-字体风格"><a href="#3-字体风格" class="headerlink" title="3.字体风格"></a>3.字体风格</h4><ul>
<li><p>属性名：<code>font-style</code></p>
</li>
<li><p>常用值：</p>
<ul>
<li><p><code>normal</code>：正常（默认值）</p>
</li>
<li><p><code>italic</code>：斜体（使用字体自带的斜体效果）</p>
</li>
<li><p><code>oblique</code>：斜体（强制倾斜产生的斜体效果）</p>
<blockquote>
<p>实现斜体的时候，更推荐使用<code>italic</code></p>
</blockquote>
</li>
</ul>
</li>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">font-style</span>:italic</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="4-字体粗细"><a href="#4-字体粗细" class="headerlink" title="4.字体粗细"></a>4.字体粗细</h4><ul>
<li><p>属性名：<code>font-weight</code></p>
</li>
<li><p>常用值：</p>
<ul>
<li><p>关键字</p>
<blockquote>
<ol>
<li><code>lighter</code>：细</li>
<li><code>normal</code>：正常</li>
<li><code>bold</code>：粗</li>
<li><code>bolder</code>：很粗（多数字体不支持）</li>
</ol>
</blockquote>
</li>
<li><p>数值</p>
<blockquote>
<ol>
<li><code>100~1000</code>且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计的精确程度）</li>
<li><code>100~300</code>等同于<code>lighter</code>，<code>400~500</code>等同于<code>normal</code>，<code>600</code>及以上等同于<code>bold</code></li>
</ol>
</blockquote>
</li>
</ul>
</li>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">font-weight</span>:bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">font-weight</span>:<span class="number">400</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="5-字体复合写法"><a href="#5-字体复合写法" class="headerlink" title="5.字体复合写法"></a>5.字体复合写法</h4><ul>
<li><p>属性名：<code>font</code>，可以把上述字体样式合并成一个属性</p>
</li>
<li><p>编写顺序：</p>
<ul>
<li><strong>字体大小、字体族必须都写上</strong></li>
<li><strong>字体族必须是最后一位、字体大小必须是倒数第二位</strong></li>
<li><strong>各个属性间用空格隔开</strong></li>
</ul>
</li>
<li><p>实际开发中更推荐复合写法，但这不是绝对的，比如只想设置字体大小，那就直接用<code>font-size</code>属性</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">	<span class="attribute">font</span>: bold italic <span class="number">100px</span> <span class="string">&quot;Microsofr YaHei&quot;</span>,<span class="string">&quot;TpHoPO&quot;</span>,sans-serif</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="常用文本属性"><a href="#常用文本属性" class="headerlink" title="常用文本属性"></a>常用文本属性</h3><h4 id="1-文本颜色："><a href="#1-文本颜色：" class="headerlink" title="1.文本颜色："></a>1.文本颜色：</h4><ul>
<li><p>属性名：<code>color</code></p>
</li>
<li><p>可选值：</p>
<ul>
<li>颜色名</li>
<li><code>rgb或rgba</code></li>
<li><code>HEX或HEXA</code></li>
<li><code>HSL或者HSLA</code></li>
</ul>
<blockquote>
<p>开发中常用的是：<code>rgb/rgba</code>或<code>HEX/HEXA(十六进制)</code></p>
</blockquote>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:<span class="built_in">rgb</span>(<span class="number">112</span>,<span class="number">45</span>,<span class="number">78</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="2-文本间距"><a href="#2-文本间距" class="headerlink" title="2.文本间距"></a>2.文本间距</h4><ul>
<li><p>字母间距：<code>letter-spacing</code></p>
</li>
<li><p>单词间距：<code>word-spacing</code>（通过空格识别词）</p>
</li>
<li><p>属性值为像素（<code>px</code>）,正值让间距增大，负值让间距缩小</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">letter-spacing</span>:<span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">word-spacing</span>:<span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="3-文本修饰"><a href="#3-文本修饰" class="headerlink" title="3.文本修饰"></a>3.文本修饰</h4><ul>
<li><p>属性名：<code>text-decoration</code></p>
</li>
<li><p>可选值：</p>
<ul>
<li><code>none</code>：无装饰线（常用）</li>
<li><code>underline</code>：下划线（常用）</li>
<li><code>overline</code>：上划线</li>
<li><code>line-through</code>：删除线</li>
</ul>
<p>可以搭配如下值使用：</p>
<ul>
<li><code>dotted</code>：虚线</li>
<li><code>wavy</code>：破浪线</li>
<li>也可以指定颜色</li>
</ul>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span>&#123;</span><br><span class="line">	<span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="4-文本缩进"><a href="#4-文本缩进" class="headerlink" title="4.文本缩进"></a>4.文本缩进</h4><ul>
<li><p>属性名：<code>text-indent</code></p>
</li>
<li><p>属性值：<code>css</code>中的长度单位，例如：<code>px</code></p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">text-indent</span>:<span class="number">40px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>后面我们会学习<code>css</code>中一些新的长度单位，目前我们只知道像素（<code>px</code>）</p>
</blockquote>
</li>
</ul>
<h4 id="5-文本对齐-水平方向"><a href="#5-文本对齐-水平方向" class="headerlink" title="5.文本对齐_水平方向"></a>5.文本对齐_水平方向</h4><ul>
<li><p>属性名：<code>text-align</code></p>
</li>
<li><p>常用值：</p>
<ul>
<li><code>left</code>：左对齐（默认值）</li>
<li><code>right</code>：右对齐</li>
<li><code>center</code>：居中对齐</li>
</ul>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">text-align</span>:center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="6-行高"><a href="#6-行高" class="headerlink" title="6.行高"></a>6.行高</h4><ul>
<li><p>属性名：<code>line-height</code></p>
</li>
<li><p>可选值：</p>
<ul>
<li><code>normal</code>：由浏览器根据文字大小决定的一个默认值</li>
<li>像素(px)</li>
<li>数字：参考自身<code>font-size</code>的倍数</li>
<li>百分比：参考自身<code>font-size</code>的百分比</li>
</ul>
</li>
<li><p>备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感</p>
</li>
<li><p>举例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">60px</span>;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">1.5</span>;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">150%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="7-行高注意事项"><a href="#7-行高注意事项" class="headerlink" title="7.行高注意事项"></a>7.行高注意事项</h4><blockquote>
<ol>
<li><code>line-height</code>过小会怎么样？– – 文字一产生重叠，且最小值是0，不能为负数</li>
<li><code>line-height</code>是可以继承的，且为了能更好的呈现文字，最好写数值</li>
<li><code>line-height</code>和<code>height</code>是什么关系？<ol>
<li>设置了height，那么高度就是height的值</li>
<li>不设置height的时候，会根据line-height计算高度</li>
</ol>
</li>
</ol>
</blockquote>
<ul>
<li><p>应用场景：</p>
<ul>
<li><p>对于多行文字：控制行与行之间的距离</p>
</li>
<li><p>对于单行文字：让<code>height</code>等于<code>line-height</code>，可以实现文字垂直居中</p>
<blockquote>
<p>备注：由于文字设计原因，靠上述办法实现居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<h4 id="8-文本对齐-垂直方向"><a href="#8-文本对齐-垂直方向" class="headerlink" title="8.文本对齐_垂直方向"></a>8.文本对齐_垂直方向</h4><ul>
<li><p><strong>顶部</strong>：无需任何属性，但垂直方向上，默认就是顶部对齐</p>
</li>
<li><p><strong>居中</strong>：对于单行文字，让<code>height</code> &#x3D;<code> line-heigh</code>t即可</p>
<blockquote>
<p>问题：多行文字垂直居中怎么办？– – 后面我们用定位去做</p>
</blockquote>
</li>
<li><p><strong>底部</strong>：对于多行文字，目前应该临时的方式：</p>
<ul>
<li>让<code>line-height</code> &#x3D; <code> (height x 2) - font-size - X</code></li>
<li>备注：X是根据字体族，动态决定的一个值</li>
</ul>
<blockquote>
<p>问题：垂直方向上的底部对齐，更好的解决办法是什么？– – 后面我们用定位去做</p>
</blockquote>
</li>
</ul>
<h4 id="9-vertical-align"><a href="#9-vertical-align" class="headerlink" title="9.vertical-align"></a>9.vertical-align</h4><ul>
<li><p>属性名：<code>vertical-align</code></p>
</li>
<li><p>作用：用于指定同一行元素之间，或表单单元格内文字的垂直对齐方式</p>
</li>
<li><p>常用值：</p>
<ul>
<li><code>baseline</code>：（默认值）：使元素的基线与父元素的基线对齐</li>
<li><code>top</code>：使元素的<strong>顶部</strong>与其<strong>所在行的顶部</strong>对齐</li>
<li><code>middle</code>：使元素的<strong>中部</strong>与<strong>父元素的基线</strong>加上父元素<strong>字母x的一半</strong>对齐</li>
<li><code>bottom</code>：使元素的<strong>底部</strong>与其<strong>所在行的底部</strong>对齐</li>
</ul>
<blockquote>
<p>特别注意：<code>vertical-align</code>不能控制块元素</p>
</blockquote>
</li>
</ul>
<h3 id="列表相关属性"><a href="#列表相关属性" class="headerlink" title="列表相关属性"></a>列表相关属性</h3><ul>
<li><p>列表相关属性，可以作用在<code>ul</code>,<code>ol</code>,<code>li</code>元素上</p>
</li>
<li><p><code>list-style-type</code>：设置列表符号</p>
<ul>
<li>常用值：<ul>
<li><code>none</code>：不显示前面的标识（很常用）</li>
<li><code>square</code>：实心方块</li>
<li><code>disc</code>：圆形</li>
<li><code>decimal</code>：数字</li>
<li><code>lower-roman</code>：小写罗马字</li>
<li><code>upper-roman</code>：大写罗马字</li>
<li><code>lower-alpha</code>：小写字母</li>
<li><code>upper-alpha</code>：大写字母</li>
</ul>
</li>
</ul>
</li>
<li><p><code>list-style-position</code>：设置列表符号的位置</p>
<ul>
<li><code>inside</code>：在li的里面</li>
<li><code>outside</code>：在li的外面</li>
</ul>
</li>
<li><p><code>list-style-image</code>：自定义列表符号</p>
<ul>
<li><code>url(图片地址)</code></li>
</ul>
</li>
<li><p><code>list-style</code>：复合属性</p>
<ul>
<li>没有数量、顺序的要求</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span>&#123;</span><br><span class="line">	<span class="attribute">list-style</span>: decimal inside <span class="built_in">url</span>(<span class="string">&quot;../img/video.gif&quot;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="表格相关属性"><a href="#表格相关属性" class="headerlink" title="表格相关属性"></a>表格相关属性</h3><h4 id="1-边框相关属性"><a href="#1-边框相关属性" class="headerlink" title="1.边框相关属性"></a>1.边框相关属性</h4><ul>
<li><p>边框相关属性（其他元素也能用）：</p>
<ul>
<li><p><code>border-width</code>：边框宽度</p>
</li>
<li><p><code>border-color</code>：边框颜色</p>
</li>
<li><p><code>border-style</code>：边框风格</p>
<ul>
<li>可用属性值：<ul>
<li><code>none</code>：默认值</li>
<li><code>solid</code>：实线</li>
<li><code>dashed</code>：虚线</li>
<li><code>dotted</code>：点线</li>
<li><code>double</code>：双实线</li>
</ul>
</li>
</ul>
</li>
<li><p><code>border</code>：边框复合属性</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">table</span>,<span class="selector-tag">td</span>,<span class="selector-tag">th</span>,<span class="selector-tag">h1</span>,<span class="selector-tag">span</span>&#123;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">3px</span> red solid</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="2-表格相关属性"><a href="#2-表格相关属性" class="headerlink" title="2.表格相关属性"></a>2.表格相关属性</h4><ul>
<li><p>表格独有属性（只有table标签才能使用）</p>
<ul>
<li><code>table-layout</code>：设置列宽度<ul>
<li>属性值：<ul>
<li><code>auto</code>：自动，列宽根据内容计算（默认值）</li>
<li><code>fixed</code>：固定列宽，平均分</li>
</ul>
</li>
</ul>
</li>
<li><code>border-spacing</code>：单元格间距<ul>
<li>属性值<ul>
<li>CSS中可用的长度值</li>
<li>生效的前提：单元格边框不能合并</li>
</ul>
</li>
</ul>
</li>
<li><code>border-collapse</code>：合并单元格边框<ul>
<li>属性值<ul>
<li><code>collapse</code>：合并</li>
<li><code>separate</code>：不合并</li>
</ul>
</li>
</ul>
</li>
<li><code>empty-cells</code>：隐藏没有内容的单元格<ul>
<li>属性值<ul>
<li><code>show</code>：显示、默认值</li>
<li><code>hide</code>：隐藏</li>
<li>生效前提：单元格不能合并</li>
</ul>
</li>
</ul>
</li>
<li><code>caption-side</code>：设置表格标题设置<ul>
<li>属性值<ul>
<li><code>top</code>：上面（默认）</li>
<li><code>bottom</code>：在表格下面</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>以上5个属性，只有表格才能使用，即：<code>&lt;table&gt;</code>标签</p>
</blockquote>
</li>
</ul>
<h3 id="背景相关属性"><a href="#背景相关属性" class="headerlink" title="背景相关属性"></a>背景相关属性</h3><ul>
<li><p><code>background-color</code>：设置背景颜色</p>
<ul>
<li>属性值：<ul>
<li>符合CSS中颜色规范的值</li>
<li>默认背景颜色是<code>transparent</code></li>
</ul>
</li>
</ul>
</li>
<li><p><code>background-image</code>：设置背景图片</p>
<ul>
<li>属性值：<ul>
<li><code>url（图片的地址）</code></li>
</ul>
</li>
</ul>
</li>
<li><p><code>background-repeat</code>：设置背景重复方式</p>
<ul>
<li>属性值：<ul>
<li><code>repeat</code>：重复，铺满整个元素，默认值</li>
<li><code>repeat-x</code>：只在水平方向重复</li>
<li><code>repeat-y</code>：只在垂直方向重复</li>
<li><code>no-repeat</code>：不重复</li>
</ul>
</li>
</ul>
</li>
<li><p><code>background-position</code>：设置背景位置：</p>
<ul>
<li>属性值<ul>
<li>水平：<code>left</code>、<code>center</code>、<code>right</code></li>
<li>垂直：<code>top</code>、<code>center</code>、<code>bottom</code></li>
<li>如果只写一个值，另一个方向的值取<code>center</code></li>
</ul>
</li>
</ul>
</li>
<li><p>background：复合属性：</p>
<ul>
<li>属性值<ul>
<li>没有数量和顺序的要求</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">background</span>: yellow <span class="built_in">url</span>(<span class="string">&quot;../img/.jgp&quot;</span>) no-repeat <span class="number">300px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="鼠标相关属性"><a href="#鼠标相关属性" class="headerlink" title="鼠标相关属性"></a>鼠标相关属性</h3><ul>
<li><p>属性名：cursor</p>
</li>
<li><p>功能：设置鼠标光标样式</p>
</li>
<li><p>属性值：</p>
<ul>
<li>pointer：小手</li>
<li>move：移动鼠标</li>
<li>text：文字选择器</li>
<li>crosshairs：十字架</li>
<li>wait：等待</li>
<li>help：帮助</li>
</ul>
<blockquote>
<p>扩展：自定义鼠标图案</p>
<p>&#x2F;* 自定义鼠标光标*&#x2F;</p>
<p><code>cursor:url(&quot;./arrow.png&quot;),pointer;</code></p>
</blockquote>
</li>
</ul>
<h3 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h3><h4 id="1-CSS中常用的长度单位"><a href="#1-CSS中常用的长度单位" class="headerlink" title="1.CSS中常用的长度单位"></a>1.CSS中常用的长度单位</h4><ul>
<li>px：像素</li>
<li>em：相对元素font-size</li>
<li>rem：相对根字体大小，html标签就是根</li>
<li>%：相对父元素计算</li>
</ul>
<blockquote>
<p>注意：CSS中设置长度，必须家单位，否则样式无效！</p>
</blockquote>
<h4 id="2-元素的显示模式"><a href="#2-元素的显示模式" class="headerlink" title="2.元素的显示模式"></a>2.元素的显示模式</h4><ul>
<li><p><strong>块元素（block）</strong></p>
<blockquote>
<p>又称：块级元素</p>
<p>特点：</p>
<ol>
<li>在页面独占一行，不会与任何元素共用一行，是从上到下排列的</li>
<li><strong>默认宽度：撑满父元素</strong></li>
<li><strong>默认高度：由内部撑开</strong></li>
<li>可以通过CSS设置宽高</li>
</ol>
</blockquote>
</li>
<li><p><strong>行内元素（inline）</strong></p>
<blockquote>
<p>又称：内联元素</p>
<p>特点：</p>
<ol>
<li>在页面不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列</li>
<li><strong>默认宽度：由内容撑开</strong></li>
<li><strong>默认高度：由内容撑开</strong></li>
<li><strong>无法</strong>通过CSS设置宽高</li>
</ol>
</blockquote>
</li>
<li><p><strong>行内块元素（inline-block）</strong></p>
<blockquote>
<p>又称：内联块元素</p>
<p>特点：</p>
<ol>
<li>在页面不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列</li>
<li><strong>默认宽度：由内容撑开</strong></li>
<li><strong>默认高度：由内容撑开</strong></li>
<li>可以通过CSS设置宽高</li>
</ol>
</blockquote>
<p><strong>注意：</strong>元素早期只分为：行内元素，块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素</p>
</li>
</ul>
<h4 id="3-总结各元素的显示样式"><a href="#3-总结各元素的显示样式" class="headerlink" title="3.总结各元素的显示样式"></a>3.总结各元素的显示样式</h4><ul>
<li><p>块元素</p>
<blockquote>
<ol>
<li>主体结构标签：<code>&lt;html&gt;,&lt;body&gt;</code></li>
<li>排版标签：<code>&lt;h1&gt;-&lt;h6&gt;,&lt;hr&gt;,&lt;p&gt;,&lt;pre&gt;,&lt;div&gt;</code></li>
<li>列表标签<code>：&lt;ul&gt;,&lt;ol&gt;,&lt;li&gt;,&lt;dl&gt;,&lt;dt&gt;,&lt;dd&gt;</code></li>
<li>表格相关标签：<code>&lt;table&gt;,&lt;tbody&gt;,&lt;thead&gt;,&lt;tfoot&gt;,&lt;tr&gt;,&lt;caption&gt;</code></li>
<li><code>&lt;form&gt;</code>与<code>&lt;option&gt;</code></li>
</ol>
</blockquote>
</li>
<li><p>行内元素</p>
<blockquote>
<ol>
<li>文本标签：<code>&lt;br&gt;,&lt;em&gt;,&lt;strong&gt;,&lt;sup&gt;,&lt;del&gt;,&lt;ins&gt;</code></li>
<li><code>&lt;a&gt;,&lt;label&gt;</code></li>
</ol>
</blockquote>
</li>
<li><p>行内块元素</p>
<blockquote>
<ol>
<li>图片：<code>&lt;img&gt;</code></li>
<li>单元格：<code>&lt;td&gt;,&lt;th&gt;</code></li>
<li>表单控件：<code>&lt;input&gt;,&lt;textarea&gt;,&lt;select&gt;,&lt;button&gt;</code></li>
<li>框架标签：<code>&lt;iframe&gt;</code></li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="4-修改元素显示模式"><a href="#4-修改元素显示模式" class="headerlink" title="4.修改元素显示模式"></a>4.修改元素显示模式</h4><p>通过CSS中的<code>display</code>属性可以修改元素的默认显示模式，常用值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>none</code></td>
<td>元素会被隐藏</td>
</tr>
<tr>
<td><code>block</code></td>
<td>元素将作为<strong>块级元素</strong>显示</td>
</tr>
<tr>
<td><code>inline</code></td>
<td>元素将作为<strong>行内元素</strong>显示</td>
</tr>
<tr>
<td><code>inline-block</code></td>
<td>元素将作为<strong>行内块元素</strong>显示</td>
</tr>
</tbody></table>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">display</span>:inline;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="5-盒子模型的组成部分"><a href="#5-盒子模型的组成部分" class="headerlink" title="5.盒子模型的组成部分"></a>5.盒子模型的组成部分</h4><ul>
<li><p><code>CSS</code>会把所有的<code>HTML</code>元素都看成一个盒子，所有的样式也都是基于这个盒子</p>
<ul>
<li><code>margin(外边距)</code>：盒子与外界的距离</li>
<li><code>border(边框)</code>：盒子的边框</li>
<li><code>padding(内边距)</code>：紧贴内容的补白区域</li>
<li><code>content(内容)</code>：元素中的文本或后代元素都是它的内容</li>
</ul>
<p>图示如下：</p>
<img src="https://gitee.com/mihaoyou/pic-go/raw/master/img/202309151149439.png" alt="image-20230803185806781" align=left />

<p><strong>盒子的大小</strong>&#x3D; <code>content</code>+ 左右 <code>padding</code>+左右 <code>border</code></p>
<blockquote>
<p>注意：外边距margin不会影响子类盒子本身的大小，但会影响父类盒子的大小，会影响盒子的位置</p>
</blockquote>
</li>
</ul>
<h4 id="6-盒子内容区"><a href="#6-盒子内容区" class="headerlink" title="6.盒子内容区"></a>6.盒子内容区</h4><table>
<thead>
<tr>
<th>CSS属性名</th>
<th>功能</th>
<th>属性值</th>
</tr>
</thead>
<tbody><tr>
<td><code>width</code></td>
<td>设置内容区域宽度</td>
<td>长度</td>
</tr>
<tr>
<td><code>max-width</code></td>
<td>设置内容区域的最大宽度</td>
<td>长度</td>
</tr>
<tr>
<td><code>min-width</code></td>
<td>设置内容区域的最小宽度</td>
<td>长度</td>
</tr>
<tr>
<td><code>height</code></td>
<td>设置内容区域的高度</td>
<td>长度</td>
</tr>
<tr>
<td><code>max-height</code></td>
<td>设置内容区域的最大高度</td>
<td>长度</td>
</tr>
<tr>
<td><code>min-height</code></td>
<td>设置内容区域的最小高度</td>
<td>长度</td>
</tr>
</tbody></table>
<blockquote>
<p>注意：</p>
<p><code>max-width</code>、<code>min-width</code>一般不与<code>width</code>一起使用</p>
<p><code>max-height</code>、<code>min-height</code>一般不与<code>height</code>一起使用  </p>
</blockquote>
<h4 id="7-默认宽度"><a href="#7-默认宽度" class="headerlink" title="7.默认宽度"></a>7.默认宽度</h4><ul>
<li>所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度</li>
<li><strong>总宽度</strong> &#x3D; 父的<code>content</code> - 自身的左右<code>margin</code> </li>
<li><strong>内容区的宽度</strong> &#x3D; 父的<code>content</code> - 自身的左右<code>margin</code> -自身的左右<code>border</code> -自身左右<code>padding</code></li>
</ul>
<h4 id="8-盒子的内边距"><a href="#8-盒子的内边距" class="headerlink" title="8.盒子的内边距"></a>8.盒子的内边距</h4><table>
<thead>
<tr>
<th>CSS属性名</th>
<th>功能</th>
<th>属性值</th>
</tr>
</thead>
<tbody><tr>
<td><code>padding-top</code></td>
<td>上内边距</td>
<td>长度</td>
</tr>
<tr>
<td><code>padding-right</code></td>
<td>右内边距</td>
<td>长度</td>
</tr>
<tr>
<td><code>padding-bottom</code></td>
<td>下内边距</td>
<td>长度</td>
</tr>
<tr>
<td><code>padding-left</code></td>
<td>左内边距</td>
<td>长度</td>
</tr>
<tr>
<td><code>padding</code></td>
<td>复合属性</td>
<td>长度，可以设置1~4个值</td>
</tr>
</tbody></table>
<p>padding复合属性的使用规则：</p>
<ol>
<li><code>padding</code>:  <code>10px</code> ：四个方向的内边距都是10px</li>
<li><code>padding</code>:  <code>10px</code>  <code>20px</code>：上下10px，左右20px</li>
<li><code>padding</code>:   <code>10px</code>  <code>20px</code>  <code>30px</code>：上10px，左右20px，下30px</li>
<li><code>padding</code>:   <code>10px</code>  <code>20px</code>  <code>30px</code>  <code>40px</code>：上10px，右20px，下30px，左40px（顺时针方向）</li>
</ol>
<blockquote>
<p>注意点：</p>
<ol>
<li><strong>padding</strong>的值不能为负数</li>
<li><strong>行内元素</strong>的左右内边距是没有问题的，<strong>上下内边距不能完美的设置</strong></li>
<li>块级元素、行内块元素，<strong>四个方向的内边距都是可以完美设置的</strong></li>
</ol>
</blockquote>
<h4 id="9-盒子的边框"><a href="#9-盒子的边框" class="headerlink" title="9.盒子的边框"></a>9.盒子的边框</h4><table>
<thead>
<tr>
<th>CSS属性名</th>
<th>功能</th>
<th>属性值</th>
</tr>
</thead>
<tbody><tr>
<td><code>border-style</code></td>
<td>边框线风格，复合了四个方向的边框风格</td>
<td><code>none</code>：默认值  <br/><code>solid</code>：实线   <br/><code>dashed</code>：虚线   <br/><code>dotted</code>：点线    <br/><code>double</code>：双实线 ……</td>
</tr>
<tr>
<td><code>border-width</code></td>
<td>边框线宽度，复合了四个方向的边框宽度</td>
<td>长度，默认<code>3px</code></td>
</tr>
<tr>
<td><code>border-color</code></td>
<td>边框线颜色，复合了四个方向的边框颜色</td>
<td>颜色，默认黑色</td>
</tr>
<tr>
<td><code>border</code></td>
<td>复合属性</td>
<td>值没有顺序和数量要求</td>
</tr>
</tbody></table>
<blockquote>
<p>边框相关属性共有20个</p>
<p><code>border-style</code>、<code>border-width</code>、<code>border-color</code>其实也是复合属性</p>
</blockquote>
<h4 id="10-盒子外边距"><a href="#10-盒子外边距" class="headerlink" title="10.盒子外边距"></a>10.盒子外边距</h4><table>
<thead>
<tr>
<th>CSS属性名</th>
<th>功能</th>
<th>属性值</th>
</tr>
</thead>
<tbody><tr>
<td><code>margin-left</code></td>
<td>左外边距</td>
<td>CSS中的长度</td>
</tr>
<tr>
<td><code>margin-right</code></td>
<td>右外边距</td>
<td>CSS中的长度</td>
</tr>
<tr>
<td><code>margin-top</code></td>
<td>上外边距</td>
<td>CSS中的长度</td>
</tr>
<tr>
<td><code>margin-bottom</code></td>
<td>下外边距</td>
<td>CSS中的长度</td>
</tr>
<tr>
<td><code>margin</code></td>
<td>复合属性，<strong>可以写1~4个值，规律通padding（顺时针）</strong></td>
<td>CSS中的长度</td>
</tr>
</tbody></table>
<p>注意事项：</p>
<blockquote>
<ol>
<li>子元素的<code>margin</code>，是参考父元素的<code>content</code>计算的。（因为是父亲的<code>content</code>中承载着子元素）</li>
<li>上<code>margin</code>、左<code>margin</code>：<strong>影响自己的位置</strong>；下<code>margin</code>、右<code>margin</code>：<strong>影响后面兄弟的位置</strong></li>
<li><strong>块级元素、行内块元素，均可以完美地设置四个方向的margin</strong>；<strong>但行内元素，左右margin可以完美设置，上下margin设置无效</strong></li>
<li>margin的值可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居<code>div&#123;margin:10px auto;&#125;</code></li>
<li><strong>margin的值可以是负值</strong>   （覆盖）</li>
</ol>
</blockquote>
<h4 id="11-margin塌陷问题"><a href="#11-margin塌陷问题" class="headerlink" title="11.margin塌陷问题"></a>11.margin塌陷问题</h4><ul>
<li><p><strong>什么是margin塌陷问题？</strong></p>
</li>
<li><p><strong>第一个子元素的<code>上margin</code>会作用在父元素上，最后一个子元素的<code>下margin</code>会作用在父元素上</strong></p>
</li>
<li><p><strong>如何解决margin塌陷问题？</strong></p>
</li>
<li><p>方案一：给<strong>父元素</strong>设置不为0的<code>padding</code></p>
</li>
<li><p>方案二：给<strong>父元素</strong>设置宽度不为0的<code>border</code></p>
</li>
<li><p>方案三：给<strong>父元素</strong>设置CSS样式<code>overflow:hidden</code></p>
</li>
</ul>
<h4 id="12-margin合并问题"><a href="#12-margin合并问题" class="headerlink" title="12.margin合并问题"></a>12.margin合并问题</h4><ul>
<li><strong>什么是margin合并问题?</strong><ul>
<li>上面的兄弟的<strong>下外边距</strong>和下面兄弟元素的<strong>上边距</strong>会合并，取一个最大值，而不是相加</li>
</ul>
</li>
<li><strong>如何解决margin合并问题？</strong><ul>
<li><em>无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了</em></li>
</ul>
</li>
</ul>
<h4 id="13-处理内容溢出"><a href="#13-处理内容溢出" class="headerlink" title="13.处理内容溢出"></a>13.处理内容溢出</h4><table>
<thead>
<tr>
<th>CSS属性名</th>
<th>功能</th>
<th>属性值</th>
</tr>
</thead>
<tbody><tr>
<td><code>overflow</code></td>
<td>溢出内容的处理方式</td>
<td><code>visible</code>：显示 <br/> <code>hidden</code>：隐藏  <br/><code>scroll</code>：显示滚动条，不论内容是否溢出  <br/><code>auto</code>：自动显示滚动条，内容不溢出不显示</td>
</tr>
<tr>
<td><code>overflow-x</code></td>
<td>水平方向溢出内容的处理方式</td>
<td>同<code>overflow</code></td>
</tr>
<tr>
<td><code>overflow-y</code></td>
<td>垂直方向溢出内容的处理方式</td>
<td>同<code>overflow</code></td>
</tr>
</tbody></table>
<blockquote>
<p>注意：</p>
<ol>
<li><code>overflow-x</code>、<code>overflow-y</code>不能是<code>hidden</code>，一个是<code>visible</code>，是实验属性，不建议使用</li>
<li><code>overflow</code>常用的值是<code>hidden</code>和<code>auto</code>，除了能处理溢出的显示方式，还可以解决很多疑难杂症（例如<strong>margin塌陷问题</strong>）</li>
</ol>
</blockquote>
<h4 id="14-隐藏元素的两种方式"><a href="#14-隐藏元素的两种方式" class="headerlink" title="14.隐藏元素的两种方式"></a>14.隐藏元素的两种方式</h4><ul>
<li>方式一：<code>visibility</code>属性<ul>
<li><code>visibility</code>属性默认值是<code>show</code>，如果设置为<code>hidden</code>，元素会隐藏</li>
<li><strong>元素看不见了，还占着原来的位置</strong></li>
</ul>
</li>
<li>方式二：<code>display</code>属性<ul>
<li>设置<code>display:none</code>，就可以让元素隐藏</li>
<li><strong>彻底的隐藏，不但看不见，也不占用任何位置，没有大小宽高</strong></li>
</ul>
</li>
</ul>
<h4 id="15-样式的继承"><a href="#15-样式的继承" class="headerlink" title="15.样式的继承"></a>15.样式的继承</h4><ul>
<li><p>有些样式会继承，元素如果本身设置给某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）</p>
</li>
<li><p><strong>会继承的css属性</strong></p>
<blockquote>
<p>字体属性、文本属性（除了veritical-align）、文字颜色等</p>
</blockquote>
</li>
<li><p><strong>不会继承的css属性</strong></p>
<blockquote>
<p>边框、背景、内边距、外边距、宽高、溢出方式等</p>
</blockquote>
</li>
<li><p><strong>规律：</strong></p>
<blockquote>
<p>一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的</p>
</blockquote>
</li>
</ul>
<h4 id="16-默认样式"><a href="#16-默认样式" class="headerlink" title="16.默认样式"></a>16.默认样式</h4><ul>
<li><p>元素一般都有些默认的样式，例如：</p>
<ul>
<li><p><code>&lt;a&gt;</code>元素：下划线、字体颜色、鼠标小手</p>
</li>
<li><p><code>&lt;h1&gt;~&lt;h6&gt;</code>元素：文字加粗、文字大小、上下外边距</p>
</li>
<li><p><code>&lt;p&gt;</code>元素：上下外边距</p>
</li>
<li><p><code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>元素：左内边距</p>
</li>
<li><p>body元素：8px外边距（4个方向）</p>
<p>…….</p>
</li>
</ul>
<blockquote>
<p>优先级：元素的默认样式 &gt; 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素上</p>
</blockquote>
</li>
</ul>
<h4 id="17-CSS布局技巧"><a href="#17-CSS布局技巧" class="headerlink" title="17.CSS布局技巧"></a>17.CSS布局技巧</h4><ul>
<li><p>行内元素、行块内元素、可以被父元素当成文本处理</p>
<blockquote>
<p>即：可以像处理文本对齐一样，去处理：行内、行块内在父元素中的对齐</p>
<p>例如：<code>text-align</code>、<code>line-height</code>、<code>text-indent</code></p>
</blockquote>
</li>
<li><p>如何让子元素，在父亲中<strong>水平居中</strong>：</p>
<ul>
<li>若子元素为<strong>块元素</strong>，给子元素加上：<code>magin:0 auto</code></li>
<li>若子元素为<strong>行内元素、行块内元素</strong>，给父元素加上：<code>text-align:center</code></li>
</ul>
</li>
<li><p>如何让子元素，在父亲中<strong>垂直居中</strong>：</p>
<ul>
<li>若子元素为<strong>块元素</strong>，给子元素加上<code>：margin-top</code>，值为：<strong>（父元素content - 子元素盒子总高）&#x2F; 2</strong></li>
<li>若子元素为<strong>行内元素，行内块元素：</strong><ul>
<li>让父元素的height &#x3D; line-height，每个子元素都加上：<code>vertical-align:middle</code></li>
<li>补充：<strong>若想绝对垂直居中，父元素font-size设置为0</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="18-元素之间的空白问题"><a href="#18-元素之间的空白问题" class="headerlink" title="18.元素之间的空白问题"></a>18.元素之间的空白问题</h4><ul>
<li><strong>产生原因：</strong><ul>
<li>行内元素、行内块元素、彼此之间的换行会被浏览器解析为一个空白字符</li>
</ul>
</li>
<li><strong>解决方案：</strong><ul>
<li><strong>方案一</strong>：去掉换行和空格（不推荐）</li>
<li><strong>方案二</strong>：给父元素设置<code>font-size:0</code>，再给需要显示文字的元素，单独设置字体大小</li>
</ul>
</li>
</ul>
<h4 id="19-行内块元素的幽灵空白问题"><a href="#19-行内块元素的幽灵空白问题" class="headerlink" title="19.行内块元素的幽灵空白问题"></a>19.行内块元素的幽灵空白问题</h4><ul>
<li><strong>产生原因：</strong><ul>
<li>行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的</li>
</ul>
</li>
<li><strong>解决方案：</strong><ul>
<li>方案一：给行内块元素设置<code>vertical</code>，值不为<code>baseline</code>即可，设置为<code>middel</code>、<code>bottom</code>、<code>top</code>均可</li>
<li>方案二：若父元素只有一张照片，设置图片为<code>dispaly:block</code></li>
<li>方案三：给父元素设置<code>font-size:0</code>，如果该行内块内部还有文本，则需要单独设置<code>font-size</code></li>
</ul>
</li>
</ul>
<h3 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h3><h4 id="1-元素浮动的特点"><a href="#1-元素浮动的特点" class="headerlink" title="1.元素浮动的特点"></a>1.元素浮动的特点</h4><ul>
<li>❌脱离文档流</li>
<li>✅不管浮动前是什么元素，浮动后：默认宽高都是被内容撑开（尽可能小），而且可以设置宽高</li>
<li>✅不会独占一行，可以与其他元素共用一行</li>
<li>✅不会<strong>margin合并</strong>，也不会<strong>margin塌陷</strong>，能够完美的设置四个方向的<strong>margin</strong>和<strong>padding</strong></li>
<li>✅不会像行内块一样被当做文本处理（没有行内块的空白问题）</li>
</ul>
<h4 id="2-浮动后的影响"><a href="#2-浮动后的影响" class="headerlink" title="2.浮动后的影响"></a>2.浮动后的影响</h4><ul>
<li><strong>对兄弟元素的影响：</strong>后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响</li>
<li><strong>对父元素的影响：</strong>不能撑开父元素的高度，，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素</li>
</ul>
<h4 id="3-解决浮动产生的影响"><a href="#3-解决浮动产生的影响" class="headerlink" title="3.解决浮动产生的影响"></a>3.解决浮动产生的影响</h4><p><strong>解决方案：</strong></p>
<ul>
<li><p>方案一：给父元素指定高度</p>
</li>
<li><p>方案二：给父元素也设置浮动，带来其他影响</p>
</li>
<li><p>方案三：给父元素设置<code>overflow:hidden</code></p>
</li>
<li><p>方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置：<code>clear:both</code></p>
</li>
<li><p>方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。&#x3D;&#x3D;&#x3D;&gt;<strong>推荐使用</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">	<span class="attribute">content</span>:<span class="string">&quot;&quot;</span>;</span><br><span class="line">	<span class="attribute">display</span>:block;</span><br><span class="line">	<span class="attribute">clear</span>:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>布局中的一个原则：设置浮动的时候，兄弟元素要么全部浮动，要么全都不浮动</p>
</blockquote>
</li>
</ul>
<h3 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h3><h4 id="1-相对定位"><a href="#1-相对定位" class="headerlink" title="1.相对定位"></a>1.相对定位</h4><ul>
<li><p><strong>如何设置相对定位？</strong></p>
<ul>
<li>给元素设置<code>position:relative</code>即可实现相对定位</li>
<li>可以使用<code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>四个属性调整位置<strong>（属性值可以是负值）</strong></li>
</ul>
</li>
<li><p><strong>相对定位的参考点在哪里？</strong></p>
<ul>
<li>相对自己原来的位置</li>
</ul>
</li>
<li><p><strong>相对定位的特点：</strong></p>
<ul>
<li><strong>不会脱离文档流</strong>，元素位置变化，只是视觉效果上的变化，不会对其他元素产生任何影响</li>
<li>定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的<ul>
<li>默认规则是：<ul>
<li>定位的元素会覆盖在普通元素上</li>
<li>都发生定位的两个元素，后写的元素会盖在先写的元素上</li>
</ul>
</li>
</ul>
</li>
<li><code>left</code>不能和<code>right</code>一起设置，<code>top</code>和<code>bottom</code>不能一起设置</li>
<li>相对定位的元素，也能继续浮动，但不推荐这样做</li>
<li>相对行为的元素，也能通过margin调整位置，但不推荐这样做</li>
</ul>
<blockquote>
<p>注意：绝大数情况下，相对定位，会与绝对定位配合使用</p>
</blockquote>
</li>
</ul>
<h4 id="2-绝对定位"><a href="#2-绝对定位" class="headerlink" title="2.绝对定位"></a>2.绝对定位</h4><ul>
<li><p>如何设置绝对定位</p>
<ul>
<li>给元素设置<code>position:absolute</code>即可实现绝对定位</li>
<li>可以使用<code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>四个属性调整位置</li>
</ul>
</li>
<li><p>绝对定位的参考点在哪里？</p>
<ul>
<li><p>参考它的<strong>包含块</strong></p>
<blockquote>
<p>什么是包含块？</p>
<ol>
<li>对于没有脱离文档流的元素：包含块就是父元素</li>
<li>对于脱离文档流的元素：包含块就是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）</li>
</ol>
</blockquote>
</li>
</ul>
</li>
<li><p>绝对定位元素的特点：</p>
<ul>
<li>脱离文档流，会对后面的兄弟元素、父元素有影响</li>
<li><code>left</code>不能和<code>right</code>一起设置，<code>top</code>和<code>bottom</code>不能一起设置</li>
<li>绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主</li>
<li>绝对定位的元素，也嫩通过<code>margin</code>调整位置，但不推荐这样做</li>
<li><strong>无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成定位元素</strong></li>
</ul>
<blockquote>
<p>何为定位元素？– – <strong>默认宽、高都被内容所撑开，且能自由设置宽高</strong></p>
</blockquote>
</li>
</ul>
<h4 id="3-固定定位"><a href="#3-固定定位" class="headerlink" title="3.固定定位"></a>3.固定定位</h4><ul>
<li><p>如何设置固定定位？</p>
<ul>
<li>给元素设置<code>position:fixed</code>，即可实现固定定位</li>
<li>可以使用<code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>四个属性调整位置</li>
</ul>
</li>
<li><p>固定定位的参考点在哪里？</p>
<ul>
<li><p>参考它的视口</p>
<blockquote>
<p>什么是视口？– – 对应PC浏览器来说，视口就是我们看网页的那扇“窗户”</p>
</blockquote>
</li>
</ul>
</li>
<li><p>固定定位元素的特点</p>
<ul>
<li>脱离文档流，会对后面的兄弟元素、父元素有影响</li>
<li><code>left</code>不能和<code>right</code>一起设置，<code>top</code>和<code>bottom</code>不能一起设置</li>
<li>固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主</li>
<li>固定定位的元素，也能通过<code>margin</code>调整位置，，但不推荐这样做</li>
<li>无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素</li>
</ul>
</li>
</ul>
<h4 id="4-粘性定位"><a href="#4-粘性定位" class="headerlink" title="4.粘性定位"></a>4.粘性定位</h4><ul>
<li><p>如何设置为粘性定位？</p>
<ul>
<li>给元素设置<code>position:sticky</code>，即可实现粘性定位</li>
<li>可以使用<code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>四个属性调整位置，不过最常用的是top</li>
</ul>
</li>
<li><p>粘性定位的参考点在哪里？</p>
<ul>
<li><strong>离它最近的一个拥有“滚动机制的祖先元素”，即使这个祖先不是最近的真实可滚动祖先</strong></li>
</ul>
</li>
<li><p>粘性定位元素的特点</p>
<ul>
<li><strong>不会脱离文档流，</strong>它是一种专门用于窗口滚动时的新的定位方式</li>
<li>最常用的值是<code>top</code>值</li>
<li>粘性定位和浮动可以同时设置，但不推荐这样做</li>
<li>粘性定位的元素，也能通过<code>margin</code>调整位置，但不推荐这样做</li>
</ul>
<blockquote>
<p>粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置是将其固定</p>
</blockquote>
</li>
</ul>
<h4 id="定位层级"><a href="#定位层级" class="headerlink" title="定位层级"></a>定位层级</h4><ul>
<li>定位元素的显示层级比普通元素高，无论什么定位，，显示层级都是一样的</li>
<li>如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上</li>
<li>可以通过<code>css</code>属性<code>z-index</code>调整元素的显示层级 </li>
<li><code>z-index</code>的属性值是数字，没有单位，值越大显示层级越高</li>
<li>只用定位的元素设置z-index才有效</li>
<li>如果<code>z-index</code>值越小的元素，依然没有覆盖掉<code>z-index</code>值越小的元素，那么请检查其保护块的层级</li>
</ul>
<h4 id="定位的特殊应用"><a href="#定位的特殊应用" class="headerlink" title="定位的特殊应用"></a>定位的特殊应用</h4><blockquote>
<p>注意：</p>
<ol>
<li>发生固定定位、绝对定位，元素都变成了定位元素，默认高度被内容撑开，且依旧可以设置宽高</li>
<li>发生相对定位后，元素依然是之前的显示模式</li>
<li>以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素</li>
</ol>
</blockquote>
<ul>
<li><p>让定位元素的宽充满包含块</p>
<ul>
<li>块宽想与包含块一致，可以给定位元素同时设置left和right为0</li>
<li>高度想与包含块一致，top和bottom设置为0</li>
</ul>
</li>
<li><p>让定位元素在包含块中居中</p>
<ul>
<li><p>方案一：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">left</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">right</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">top</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">bottom</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">margin</span>:auto;</span><br></pre></td></tr></table></figure>
</li>
<li><p>方案二：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">left</span>:<span class="number">50%</span></span><br><span class="line">top:<span class="number">50%</span></span><br><span class="line">margin-left:负的宽度一半</span><br><span class="line">margin-right:负的高度一半</span><br></pre></td></tr></table></figure></li>
</ul>
<blockquote>
<p>注意：<strong>该定位的元素必须设置宽度!!!</strong></p>
</blockquote>
</li>
</ul>
<h3 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h3><h4 id="1-版心"><a href="#1-版心" class="headerlink" title="1.版心"></a>1.版心</h4><ul>
<li>在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网友的<strong>版心</strong></li>
<li>版心的宽度一般是<strong>960~1200</strong>像素之间</li>
<li>版心可以是一个，也可以是多个</li>
</ul>
<h4 id="2-布局常用类名"><a href="#2-布局常用类名" class="headerlink" title="2.布局常用类名"></a>2.布局常用类名</h4><table>
<thead>
<tr>
<th>位置</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>顶部导航栏</td>
<td><code>topbar</code></td>
</tr>
<tr>
<td>页头</td>
<td><code>header</code>、<code>page-header</code></td>
</tr>
<tr>
<td>导航</td>
<td><code>nav</code>、<code>navigator</code>、<code>navbar</code></td>
</tr>
<tr>
<td>搜索框</td>
<td><code>search</code>、<code>search-box</code></td>
</tr>
<tr>
<td>横幅、广告、宣传图</td>
<td><code>banner</code></td>
</tr>
<tr>
<td>主要内容</td>
<td><code>content</code>、<code>main</code></td>
</tr>
<tr>
<td>侧边栏</td>
<td><code>aside</code>、<code>sidebar</code></td>
</tr>
<tr>
<td>页脚</td>
<td><code>footer</code>、<code>page-footer</code></td>
</tr>
</tbody></table>
<h4 id="3-重置默认样式"><a href="#3-重置默认样式" class="headerlink" title="3.重置默认样式"></a>3.重置默认样式</h4><p><strong>很多元素都是有默认样式的，比如：</strong></p>
<ol>
<li><code>p</code>元素有默认的上下<code>margin</code></li>
<li><code>h1~h6</code>标题也有上下<code>margin</code>，且字体加粗</li>
<li><code>body</code>元素有默认的<code>8px</code>外边框  </li>
<li>超链接有默认的文字颜色和下划线</li>
<li><code>ul</code>元素有默认的左<code>padding</code></li>
<li>…..</li>
</ol>
<blockquote>
<p>在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同的浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式</p>
</blockquote>
<p><strong>方案一：使用全局选择器</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line">	<span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">	....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>此种方式，在简单案例可以用一下，但实际开发中不会使用，因为*选择的是所有元素，而且不是所有的元素都有默认样式；而且完美重置时，有时候是需要做特定处理的，比如：想让a元素的文字是灰色，其他元素文字是蓝色</p>
</blockquote>
<p><strong>方案二：</strong><code>reset.css</code></p>
<ul>
<li><p>选择到具有默认样式的元素，清空其默认的样式</p>
<blockquote>
<p>经过reset后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式</p>
</blockquote>
</li>
</ul>
<p><strong>方案三：</strong><code>Normalize.css</code></p>
<ul>
<li><code>Normalize.css</code>是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式<ul>
<li>官网地址：<a target="_blank" rel="noopener" href="http://necolas.github.io/normalize.css/">http://necolas.github.io/normalize.css/</a></li>
</ul>
</li>
<li>相对于<code>rese.css</code>，<code>Normalize.css</code>有如下优点：<ul>
<li>保护了有价值的默认样式，而不是完全去除它们</li>
<li>为大部分<code>HTML</code>元素提供一般化的样式</li>
<li>新增对<code>HTML5</code>元素是设置</li>
<li>对并集选择器的使用比较谨慎，有效避免调试工具杂乱</li>
</ul>
</li>
</ul>
<blockquote>
<p>备注：<strong>Normalize.css</strong>的重置，和<strong>reset.css</strong>相比，更加的温和，开发时可根据实际情况进行选择</p>
</blockquote>
<h3 id="二、HTML5简介"><a href="#二、HTML5简介" class="headerlink" title="二、HTML5简介"></a>二、HTML5简介</h3><ul>
<li><p><strong>什么是HTML5?</strong></p>
<ul>
<li><code>HTML5</code>是新一代的HTML标准，2014年10月由万维网（W3C）完成标准制定</li>
<li>官网地址：<ul>
<li>W3C提供：<a target="_blank" rel="noopener" href="https://www.w3.org/TR/html/index.html">https://www.w3.org/TR/html/index.html</a></li>
<li>WHATWG提供：<a target="_blank" rel="noopener" href="https://whatwg-cn.github.io/html/multipage">https://whatwg-cn.github.io/html/multipage</a></li>
</ul>
</li>
<li>HTML5在狭义上是指新一代的HTML标准，在广义上是指：整个前端</li>
</ul>
</li>
<li><p><strong>HTML优势</strong></p>
<ul>
<li>针对<code>JavaScript</code>，新增了很多可操作的接口</li>
<li>新增了一些语义化标签、全局属性</li>
<li>新增多媒体标签，可以很好的替代flash</li>
<li>更加侧重语义化，对应SEO更友好</li>
<li>可移植性好，可以大量应用在移动设备上</li>
</ul>
</li>
<li><p><strong>HTML兼容性</strong></p>
<ul>
<li><p>支持：<code>Chrome</code>、<code>Safari</code>、<code>Opera</code>、<code>Firefox</code>等主流浏览器</p>
<blockquote>
<p>IE浏览器必须是9以及以上版本才支持HTML5，且IE9仅部分支持HTML5新特性、</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<h4 id="1-新增布局标签"><a href="#1-新增布局标签" class="headerlink" title="1.新增布局标签"></a>1.新增布局标签</h4><table>
<thead>
<tr>
<th align="center">标签名</th>
<th align="left">语义</th>
<th align="center">单&#x2F;双标签</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><code>header</code></td>
<td align="left">整个页面，或部分区域的头部</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>footer</code></td>
<td align="left">整个页面，或部分区域的底部</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>nav</code></td>
<td align="left">导航</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>article</code></td>
<td align="left">文章、帖子、杂志、新闻、博客、评论等</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>section</code></td>
<td align="left">页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>aside</code></td>
<td align="left">侧边栏</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>main</code></td>
<td align="left">文档的主要内容（<code>WHATWG</code>没有语义，<code>IE</code>不支持），几乎不用</td>
<td align="center">双</td>
</tr>
<tr>
<td align="center"><code>hgroup</code></td>
<td align="left">包裹连续的标题，如文章主标题、副标题的组合（<code>W3C</code>将其删除）</td>
<td align="center">双</td>
</tr>
</tbody></table>
<p>关于<code>article</code>和<code>section</code></p>
<blockquote>
<ol>
<li><code>article</code>里面可以有多个<code>section</code></li>
<li><code>section</code>强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用<code>section</code>元素</li>
<li><code>article</code>比<code>section</code>更强调独立性，一块内容如果比较独立，比较完整，应该使用<code>article</code>元素</li>
</ol>
</blockquote>
<h4 id="2-新增状态标签"><a href="#2-新增状态标签" class="headerlink" title="2.新增状态标签"></a>2.新增状态标签</h4><h5 id="2-1-meter标签"><a href="#2-1-meter标签" class="headerlink" title="2.1 meter标签"></a>2.1 meter标签</h5><ul>
<li><p>语义：定义已知范围内的标量测量，也被称为gauge（尺度），双标签，例如：电量、磁盘用量等</p>
</li>
<li><p>常用属性：</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th>值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>hight</code></td>
<td>数值</td>
<td align="left">规定高度</td>
</tr>
<tr>
<td align="left"><code>low</code></td>
<td>数值</td>
<td align="left">规定低度</td>
</tr>
<tr>
<td align="left"><code>max</code></td>
<td>数值</td>
<td align="left">规定最大值</td>
</tr>
<tr>
<td align="left"><code>min</code></td>
<td>数值</td>
<td align="left">规定最小值</td>
</tr>
<tr>
<td align="left"><code>optimum</code></td>
<td>数值</td>
<td align="left">规定最优值</td>
</tr>
<tr>
<td align="left"><code>value</code></td>
<td>数值</td>
<td align="left">规定当前值</td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="2-2-progress标签"><a href="#2-2-progress标签" class="headerlink" title="2.2 progress标签"></a>2.2 progress标签</h5><ul>
<li><p>语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等</p>
</li>
<li><p>常用属性如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>max</code></td>
<td>数值</td>
<td>规定目标值</td>
</tr>
<tr>
<td><code>value</code></td>
<td>数值</td>
<td>规定当前值</td>
</tr>
</tbody></table>
</li>
</ul>
<h4 id="3-新增列表标签"><a href="#3-新增列表标签" class="headerlink" title="3.新增列表标签"></a>3.新增列表标签</h4><table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单&#x2F;双标签</th>
</tr>
</thead>
<tbody><tr>
<td><code>datalist</code></td>
<td>用于搜索框的关键字提示</td>
<td>双</td>
</tr>
<tr>
<td><code>details</code></td>
<td>用于展示问题和答案，或对专有名词进行解释</td>
<td>双</td>
</tr>
<tr>
<td><code>summary</code></td>
<td>写在<code>details</code>的里面，用于指定问题或专有名词</td>
<td>双</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span> = <span class="string">&quot;text&quot;</span> <span class="attr">list</span> = <span class="string">&quot;mydata&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">datailst</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> = <span class="string">&quot;周冬雨&quot;</span>&gt;</span>周冬雨<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> = <span class="string">&quot;周杰伦&quot;</span>&gt;</span>周杰伦<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> = <span class="string">&quot;马冬梅&quot;</span>&gt;</span>马冬梅<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> = <span class="string">&quot;温兆伦&quot;</span>&gt;</span>温兆伦<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">datailst</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">details</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">summary</span>&gt;</span>如何走上人生巅峰<span class="tag">&lt;/<span class="name">summary</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>找富婆<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">details</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="4-新增文本标签"><a href="#4-新增文本标签" class="headerlink" title="4.新增文本标签"></a>4.新增文本标签</h4><h5 id="文本注音"><a href="#文本注音" class="headerlink" title="文本注音"></a>文本注音</h5><table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单&#x2F;双标签</th>
</tr>
</thead>
<tbody><tr>
<td><code>ruby</code></td>
<td>包裹需要注音的文字</td>
<td>双</td>
</tr>
<tr>
<td><code>rt</code></td>
<td>写注音，<code>rt</code>标签写在<code>ruby</code>的里面</td>
<td>双</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ruby</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">span</span>&gt;</span>你好<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">rt</span>&gt;</span>ni hao<span class="tag">&lt;/<span class="name">rt</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ruby</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="文本标记"><a href="#文本标记" class="headerlink" title="文本标记"></a>文本标记</h5><table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单&#x2F;双标签</th>
</tr>
</thead>
<tbody><tr>
<td><code>mark</code></td>
<td>标记</td>
<td>双</td>
</tr>
</tbody></table>
<blockquote>
<p><strong>注意</strong>：<code>W3C</code>建议<code>mark</code>用于标记搜索结果中的关键字</p>
</blockquote>
<h4 id="5-新增表单标签"><a href="#5-新增表单标签" class="headerlink" title="5.新增表单标签"></a>5.新增表单标签</h4><h5 id="5-1新增表单控件属性"><a href="#5-1新增表单控件属性" class="headerlink" title="5.1新增表单控件属性"></a>5.1新增表单控件属性</h5><table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td><code>placeholder</code></td>
<td>提示文字（注意：不是默认值，<code>value</code>是默认值），适用于<strong>文字输入类</strong>的表单控件</td>
</tr>
<tr>
<td><code>require</code></td>
<td>表示该输入项必填，适用于除按钮外其他表单控件</td>
</tr>
<tr>
<td><code>autofocus</code></td>
<td>自动获取焦点，<strong>适用于所有表单控件</strong></td>
</tr>
<tr>
<td><code>autocomplete</code></td>
<td>自动完成，可以设置为<code>on</code>或<code>off</code>，适用于文字输入类的表单控件<br>注意：密码输入框，多行输入框不可用</td>
</tr>
<tr>
<td><code>pattern</code></td>
<td>填写正则表达式，适用于文本输入类表单控件<br>注意：多行输入不可用，且空的输入框不会验证，往往与<code>required</code>配合</td>
</tr>
</tbody></table>
<h5 id="5-2-input新增的type属性值"><a href="#5-2-input新增的type属性值" class="headerlink" title="5.2 input新增的type属性值"></a>5.2 input新增的type属性值</h5><table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td><code>email</code></td>
<td>邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式</td>
</tr>
<tr>
<td><code>url</code></td>
<td><code>url</code>类型的输入框，表单提交时会验证格式，输入为空则不会验证格式</td>
</tr>
<tr>
<td><code>number</code></td>
<td>数字类型的输入框，表单提交时会验证格式，输入为空则不会验证格式</td>
</tr>
<tr>
<td><code>search</code></td>
<td>搜索类型的输入框，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>tel</code></td>
<td>电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘</td>
</tr>
<tr>
<td><code>range</code></td>
<td>范围选择框，默认值为50，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>color</code></td>
<td>颜色选择框，默认值为黑色，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>date</code></td>
<td>日期选择框，默认值为空，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>month</code></td>
<td>月份选择框，默认值为空，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>week</code></td>
<td>周选择框，默认值为空，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>time</code></td>
<td>时间选择框，默认值为空，表单提交时不会验证格式</td>
</tr>
<tr>
<td><code>datetime-local</code></td>
<td>日期+时间选择框，默认值为空，表单提交时不会验证格式</td>
</tr>
</tbody></table>
<h5 id="5-3form标签新增属性"><a href="#5-3form标签新增属性" class="headerlink" title="5.3form标签新增属性"></a>5.3form标签新增属性</h5><table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td><code>novalidate</code></td>
<td>如果没有给form标签设置了该属性，表单提交的时候不再进行验证</td>
</tr>
</tbody></table>
<h4 id="新增视频标签"><a href="#新增视频标签" class="headerlink" title="新增视频标签"></a>新增视频标签</h4><p><code>&lt;video&gt;</code>标签用来定义视频，它是双标签</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>src</code></td>
<td><code>URL地址</code></td>
<td>视频地址</td>
</tr>
<tr>
<td><code>width</code></td>
<td>像素值</td>
<td>设置视频播放器的宽度</td>
</tr>
<tr>
<td><code>height</code></td>
<td>像素值</td>
<td>设置视频播放器的高度</td>
</tr>
<tr>
<td><code>controls</code></td>
<td>-</td>
<td>向用户显示视频控件（比如播放&#x2F;暂停按钮）</td>
</tr>
<tr>
<td><code>muted</code></td>
<td>-</td>
<td>视频静音</td>
</tr>
<tr>
<td><code>autoplay</code></td>
<td>-</td>
<td>视频自动播放</td>
</tr>
<tr>
<td><code>loop</code></td>
<td>-</td>
<td>循环播放</td>
</tr>
<tr>
<td><code>poster</code></td>
<td><code>URL地址</code></td>
<td>视频封面</td>
</tr>
<tr>
<td><code>preload</code></td>
<td><code>auto/metadata/none</code></td>
<td>视频预加载，如果使用autoplay，则忽略该属性<br><code>none</code>：不预加载  <br><code>metadata</code>：仅预先获取视频的元数据（例如长度）<br><code>auto</code>：下载整个视频文件，即使用户不希望使用它</td>
</tr>
</tbody></table>
<h4 id="新增音频标签"><a href="#新增音频标签" class="headerlink" title="新增音频标签"></a>新增音频标签</h4><p><code>&lt;audio&gt;</code>标签用来定义音频，它是双标签</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>src</code></td>
<td><code>URL地址</code></td>
<td>音频地址</td>
</tr>
<tr>
<td><code>controls</code></td>
<td>-</td>
<td>向用户显示音频控件（比如播放&#x2F;暂停按钮）</td>
</tr>
<tr>
<td><code>autoplay</code></td>
<td>-</td>
<td>音频自动播放</td>
</tr>
<tr>
<td><code>muted</code></td>
<td>-</td>
<td>音频静音</td>
</tr>
<tr>
<td><code>loop</code></td>
<td>-</td>
<td>循环播放</td>
</tr>
<tr>
<td><code>preload</code></td>
<td><code>auto/metadata/none</code></td>
<td>音频预加载，如果使用<code>autoplay</code>，则忽略该属性<br><code>none</code>：不预加载  <br/><code>metadata</code>：仅预先获取音频的元数据（例如长度）<br/><code>auto</code>：下载整个音频文件，即使用户不希望使用它</td>
</tr>
</tbody></table>
<h4 id="新增全局属性"><a href="#新增全局属性" class="headerlink" title="新增全局属性"></a>新增全局属性</h4><table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td><code>contenteditable</code></td>
<td>表示元素是否可被编辑，可选值如下：<br><code>true</code>：可编辑 <br><code>false</code>：不可编辑</td>
</tr>
<tr>
<td><code>draggable</code></td>
<td>表示元素可以被拖动，可选值如下：<br><code>true</code>：可拖动 <br><code>false</code>：不可拖动</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>隐藏元素（不占位）</td>
</tr>
<tr>
<td><code>spellcheck</code></td>
<td>规定是否对元素进行拼写和语法检查，可选值如下：<br><code>true</code>：检查 <br><code>false</code>：不检查</td>
</tr>
<tr>
<td><code>contextmenu</code></td>
<td>规定元素的上下文菜单，在用户鼠标右键点击元素时显示</td>
</tr>
<tr>
<td><code>data-*</code></td>
<td>用于存储页面的私有定制数据</td>
</tr>
</tbody></table>
<h4 id="兼容性处理"><a href="#兼容性处理" class="headerlink" title="兼容性处理"></a>兼容性处理</h4><ul>
<li><p>添加元信息，让浏览器处于最优渲染模式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--设置IE总是使用最新的文档模式进行渲染--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span> = <span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span> = <span class="string">&quot;IE=Edge&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--优先使用webkit（Chromium）内核进行渲染，针对360等壳浏览器--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span> = <span class="string">&quot;renderer&quot;</span> <span class="attr">content</span> = <span class="string">&quot;webkit&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>使用html5shiv让低版本浏览器认识H5的语义化标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if lt ie 9]&gt;</span></span><br><span class="line"><span class="comment">&lt;script src = &quot;../sources/js/html5shiv.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>扩展</p>
<blockquote>
<ol>
<li><code>lt</code>：小于</li>
<li><code>lte</code>:小于等于</li>
<li><code>gt</code>：大于</li>
<li><code>gte</code>：大于等于</li>
<li><code>!</code>：逻辑非</li>
</ol>
</blockquote>
</li>
</ul>
<h3 id="三、CSS3简介"><a href="#三、CSS3简介" class="headerlink" title="三、CSS3简介"></a>三、CSS3简介</h3><h4 id="1-CSS概述"><a href="#1-CSS概述" class="headerlink" title="1.CSS概述"></a>1.CSS概述</h4><ul>
<li><code>CSS3</code>是<code>CSS2</code>的升级版本它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题</li>
<li>CSS在未来会按照模块化的方式去发展：<a target="_blank" rel="noopener" href="https://www.w3.org/Style/CSS/current-work.html">https://www.w3.org/Style/CSS/current-work.html</a></li>
<li><code>CSS3</code>的新特性如下：<ul>
<li>新增了更加实用的选择器，例如：动态伪类选择器，目标伪类选择器，伪元素选择器等</li>
<li>新增了更好的视觉效果，例如：圆角、阴影、渐变等</li>
<li>新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性</li>
<li>新增了全新的布局方案– – 弹性盒子</li>
<li>新增了<code>Web</code>字体，可以显示用户电脑上没有安装的字体</li>
<li>增强了颜色，例如：<code>HSL</code>、<code>HSLA</code>、<code>RGBA</code>几种新的颜色模式，新增opacity属性来控制透明度</li>
<li>增加了<code>2D</code>和<code>3D</code>变换，例如：旋转、扭曲、缩放、位移</li>
<li>增加了动画与过渡效果，让效果的变换更具有流线性，平滑性</li>
<li>…….</li>
</ul>
</li>
</ul>
<h4 id="2-CSS3私有前缀"><a href="#2-CSS3私有前缀" class="headerlink" title="2.CSS3私有前缀"></a>2.CSS3私有前缀</h4><h5 id="2-1什么是私有前缀"><a href="#2-1什么是私有前缀" class="headerlink" title="2.1什么是私有前缀"></a>2.1什么是私有前缀</h5><p>如下代码中的<code>-webkit-</code>就是私有前缀</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">400px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">400px</span>;</span><br><span class="line">	-webkit-<span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="2-2为什么要有私有前缀"><a href="#2-2为什么要有私有前缀" class="headerlink" title="2.2为什么要有私有前缀"></a>2.2为什么要有私有前缀</h5><ul>
<li><p><code>W3C</code>标准所提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了</p>
</li>
<li><p>例如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">-webkit-<span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br><span class="line">-moz-<span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br><span class="line">-ms-<span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br><span class="line">-o-<span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">20px</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>查询CSS兼容性的网址：<a target="_blank" rel="noopener" href="https://caniuse.com/">https://caniuse.com/</a></p>
</li>
</ul>
<h5 id="2-3常用浏览器私有前缀"><a href="#2-3常用浏览器私有前缀" class="headerlink" title="2.3常用浏览器私有前缀"></a>2.3常用浏览器私有前缀</h5><ul>
<li><code>Chrome</code>浏览器：<code>-webkit-</code></li>
<li><code>Safari</code>浏览器：<code>-webkit-</code></li>
<li><code>Firefox</code>浏览器：<code>-moz-</code></li>
<li><code>Edge</code>浏览器：<code>-webkit-</code></li>
<li>旧<code>Opera</code>浏览器：<code>-o-</code></li>
<li>旧<code>IE</code>浏览器：<code>-ms-</code></li>
</ul>
<p>注意：</p>
<blockquote>
<p>我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆它，也不用每个都去查询，因为常用的<code>CSS</code>新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀</p>
</blockquote>
<h4 id="3-新增长度单位"><a href="#3-新增长度单位" class="headerlink" title="3.新增长度单位"></a>3.新增长度单位</h4><ol>
<li><code>rem</code>根元素字体大小的倍速，只与根元素字体大小有关</li>
<li><code>vw</code>视口宽度的百分之多少，<code>10vw</code>就是视口宽度的10%</li>
<li><code>vh</code>视口高度的百分之多少，<code>10vh</code>就是视口高度的10%</li>
<li><code>vmin</code>视口宽高中小的那个的百分之多少，（了解即可）</li>
<li><code>vmax</code>视口宽高中大的那个的百分之多少，（了解即可）</li>
</ol>
<h4 id="4-新增颜色设置方式"><a href="#4-新增颜色设置方式" class="headerlink" title="4.新增颜色设置方式"></a>4.新增颜色设置方式</h4><p><code>CSS3</code>新增了三种颜色设置方式，分别是：<code>rgba</code>、<code>hsl</code>、<code>hsla</code>、由于之前已经详细讲解过，此处略过</p>
<h4 id="5-新增选择器"><a href="#5-新增选择器" class="headerlink" title="5.新增选择器"></a>5.新增选择器</h4><p><code>CSS3</code>中新增选择器有：动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素，这些在之前已经详细讲解过，此处略过</p>
<h4 id="6-新增盒子属性"><a href="#6-新增盒子属性" class="headerlink" title="6.新增盒子属性"></a>6.新增盒子属性</h4><h5 id="6-1-box-sizing怪异盒模型"><a href="#6-1-box-sizing怪异盒模型" class="headerlink" title="6.1 box-sizing怪异盒模型"></a>6.1 <strong>box-sizing</strong>怪异盒模型</h5><p>使用<code>box-sizing</code>属性可以设置盒模型的两种类型</p>
<table>
<thead>
<tr>
<th>可选值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>content-box</code></td>
<td><code>width</code>和<code>height</code>设置的是盒子内容区的大小（默认值）</td>
</tr>
<tr>
<td><code>border-box</code></td>
<td><code>width</code>和<code>height</code>设置的是盒子总大小（怪异盒模型）</td>
</tr>
</tbody></table>
<h5 id="6-2resize调整盒子大小"><a href="#6-2resize调整盒子大小" class="headerlink" title="6.2resize调整盒子大小"></a><strong>6.2resize</strong>调整盒子大小</h5><p>使用resize属性可以控制是否允许用户调整元素尺寸</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>none</code></td>
<td>不允许用户调整元素大小（默认）</td>
</tr>
<tr>
<td><code>both</code></td>
<td>用户可以调节元素的宽高和高度</td>
</tr>
<tr>
<td><code>horizontal</code></td>
<td>用户可以调节元素的宽度</td>
</tr>
<tr>
<td><code>vertical</code></td>
<td>用户可以调节元素的高度</td>
</tr>
</tbody></table>
<h5 id="6-3-box-shadow盒子阴影"><a href="#6-3-box-shadow盒子阴影" class="headerlink" title="6.3 box-shadow盒子阴影"></a>6.3 <strong>box-shadow</strong>盒子阴影</h5><p>使用<code>box-shadow</code>属性为盒子添加阴影</p>
<ul>
<li><p>语法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">box-shadow</span>： h-shadow v-shadow blur spread <span class="attribute">color</span> inset;</span><br></pre></td></tr></table></figure>
</li>
<li><p>各个值的含义：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>h-shadow</code></td>
<td>水平阴影的位置，必须填写，可以为负值</td>
</tr>
<tr>
<td><code>v-shadow</code></td>
<td>垂直阴影的位置，必须填写，可以为负值</td>
</tr>
<tr>
<td><code>blur</code></td>
<td>可选，模糊距离</td>
</tr>
<tr>
<td><code>spread</code></td>
<td>可选，阴影的外延值</td>
</tr>
<tr>
<td><code>color</code></td>
<td>可选，阴影的颜色</td>
</tr>
<tr>
<td><code>inset</code></td>
<td>可选，将外部阴影改为内容阴影</td>
</tr>
</tbody></table>
</li>
<li><p>默认值：<code>box-shadow:none</code>表示没有阴影</p>
<p>示例：<code>box-shadow:10px 10px 20px 3px blue inset</code></p>
</li>
</ul>
<h4 id="6-4-opacity不透明度"><a href="#6-4-opacity不透明度" class="headerlink" title="6.4 opacity不透明度"></a>6.4 <strong>opacity</strong>不透明度</h4><p><code>opacity</code>属性能为整个元素添加透明效果，值是0到1之间的 小数，<strong>0是完全透明</strong>，<strong>1表示完全不透明</strong></p>
<blockquote>
<p><code>opacity</code>与<code>rgba</code>的区别？</p>
<ol>
<li><code>opacity</code>是一个属性，设置的是整个元素（包括元素的内容）的不透明度</li>
<li><code>rgba</code>是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度</li>
</ol>
</blockquote>
<h4 id="7-新增背景属性"><a href="#7-新增背景属性" class="headerlink" title="7.新增背景属性"></a>7.新增背景属性</h4><h5 id="7-1-background-origin"><a href="#7-1-background-origin" class="headerlink" title="7.1 background-origin"></a>7.1 <strong>background-origin</strong></h5><ul>
<li>作用：<strong>设置背景图的原点</strong></li>
<li>语法：<ul>
<li><code>padding-box</code>：从padding区域开始显示背景图像– –默认值</li>
<li><code>border-box</code>：从border区域开始显示背景图像 <a href="C:\Users\Fuck\Desktop\Xmind.lnk">Xmind.lnk</a> </li>
<li><code>content-box</code>：从content区域开始显示背景图像</li>
</ul>
</li>
</ul>
<h5 id="7-2-background-clip"><a href="#7-2-background-clip" class="headerlink" title="7.2 background-clip"></a>7.2 <strong>background-clip</strong></h5><ul>
<li><p>作用：设置背景图的向外裁剪的区域</p>
</li>
<li><p>语法：</p>
<ul>
<li><code>border-box</code>：从border区域向外裁剪背景 – – 默认值</li>
<li><code>padding-box</code>：从padding区域向外裁剪背景</li>
<li><code>content-box</code>：从content区域向外裁剪背景</li>
<li><code>text</code>：背景图只呈现在文字上</li>
</ul>
<blockquote>
<p>注意：若值为<code>text</code>，那么<code>background-clip</code>要加上<code>-webkit-</code>前缀</p>
</blockquote>
</li>
</ul>
<h5 id="7-3-background-size"><a href="#7-3-background-size" class="headerlink" title="7.3 background-size"></a>7.3 <strong>background-size</strong></h5><ul>
<li><p>作用：设置背景图的尺寸</p>
</li>
<li><p>语法：</p>
<ul>
<li><p>用长度值指定背景图片大小，不允许负值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-size</span>:<span class="number">300px</span> <span class="number">200px</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>用百分比指定背景图片大小，不允许负值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-size</span>:<span class="number">100%</span> <span class="number">100%</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>auto</code>背景图片的真实大小 – – 默认值</p>
</li>
<li><p><code>contain</code>：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-size</span>:contain;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>cover</code>：将背景图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整 – – 相对比较好的选择</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-size</span>:cover</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h5 id="7-4-background-复合属性"><a href="#7-4-background-复合属性" class="headerlink" title="7.4 background 复合属性"></a>7.4 <strong>background</strong> 复合属性</h5><ul>
<li><p>语法：</p>
<p><code>background:color url repeat position/size origin clip</code></p>
<blockquote>
<p><strong>注意</strong>：</p>
<ol>
<li><code>orgin</code>和<code>clip</code>的值如果一样，如果只写一个值，则<code>origin</code>和<code>clip</code>都设置，如果设置了两个值，前面的是<code>origin</code>，后面是<code>clip</code></li>
<li><code>size</code>的值必须写在<code>position</code>值的后面，并且用<code>/</code>分开</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="7-5多背景图"><a href="#7-5多背景图" class="headerlink" title="7.5多背景图"></a>7.5<strong>多背景图</strong></h5><ul>
<li><p>CSS3允许元素添加多个背景图片</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 添加多个背景图 */</span></span><br><span class="line"><span class="attribute">background</span>:  <span class="built_in">url</span>(<span class="string">../img/bg-lt.png</span>) no repeat,</span><br><span class="line">			<span class="built_in">url</span>(<span class="string">../img/bg-rt.png</span>) no repeat right top,</span><br><span class="line">			<span class="built_in">url</span>(<span class="string">../img/bg-lb.png</span>) no repeat left bottom,</span><br><span class="line">			<span class="built_in">url</span>(<span class="string">../img/bg-rb.png</span>) no repeat right bottom,</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="8-新增边框相关属性"><a href="#8-新增边框相关属性" class="headerlink" title="8.新增边框相关属性"></a>8.新增边框相关属性</h4><h5 id="8-1-边框圆角"><a href="#8-1-边框圆角" class="headerlink" title="8.1 边框圆角"></a>8.1 边框圆角</h5><ul>
<li><p>在<code>CSS3</code>中，使用<code>border-radius</code>属性可以将盒子变为圆角</p>
</li>
<li><p>同时设置四个角的圆角</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border-radius</span>:<span class="number">10px</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>分别设置每个角的圆角（几乎不用）</p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>border-top-left-radius</code></td>
<td>设置左上角圆角半径：<br>1.一个值是正圆半径 <br>2.两个值分别是椭圆的x半径，y半径</td>
</tr>
<tr>
<td><code>border-top-right-radius</code></td>
<td>设置右上角圆角半径：<br>1.一个值是正圆半径<br> 2.两个值分别是椭圆的x半径，y半径</td>
</tr>
<tr>
<td><code>border-bottom-right-radius</code></td>
<td>设置右下角圆角半径：<br/>1.一个值是正圆半径<br/> 2.两个值分别是椭圆的x半径，y半径</td>
</tr>
<tr>
<td><code>border-bottom-left-radius</code></td>
<td>设置左下角圆角半径：<br/>1.一个值是正圆半径<br/> 2.两个值分别是椭圆的x半径，y半径</td>
</tr>
</tbody></table>
</li>
<li><p>分别设置每一个角的圆角，综合写法（几乎不用）</p>
<p><code>border-raidus：左上角 x  右上角x  右下角x  左下角x / 左上角 y  右上角y  右下角y  左下角y</code></p>
</li>
</ul>
<h5 id="8-2-边框外轮廓"><a href="#8-2-边框外轮廓" class="headerlink" title="8.2 边框外轮廓"></a>8.2 边框外轮廓</h5><ul>
<li><p><code>outline-width</code>：外轮廓的宽度</p>
</li>
<li><p><code>outline-color</code>：外轮廓的颜色</p>
</li>
<li><p><code>outline-style</code>：外轮廓的风格</p>
<ul>
<li><code>none</code>：无轮廓</li>
<li><code>dotted</code>：点状轮廓</li>
<li><code>dashed</code>：虚线轮廓</li>
<li><code>solid</code>：实线轮廓</li>
<li><code>double</code>：双线轮廓</li>
</ul>
</li>
<li><p><code>outline-offset</code>：设置外轮廓与边框的距离，正负值都可以设置</p>
<blockquote>
<p>注意：<code>outline-offset</code>不是<code>outline</code>的子属性，是一个独立的属性</p>
</blockquote>
</li>
<li><p><code>outline</code>复合属性</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">outline</span>:<span class="number">50px</span> solid blue;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="9-新增文本属性"><a href="#9-新增文本属性" class="headerlink" title="9.新增文本属性"></a>9.新增文本属性</h4><h5 id="9-1文本阴影"><a href="#9-1文本阴影" class="headerlink" title="9.1文本阴影"></a>9.1文本阴影</h5><ul>
<li><p>在CSS中，我们可以使用text-shadow属性给文本添加阴影</p>
</li>
<li><p>语法：</p>
<p><code>text-shadow: h-shadow v-shadow blur color</code></p>
</li>
<li><table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>h-shadow</td>
<td>必须写，水平阴影的位置，允许负值</td>
</tr>
<tr>
<td>v-shadow</td>
<td>必须写，垂直阴影的位置，允许负值</td>
</tr>
<tr>
<td>blur</td>
<td>可选，模糊的距离</td>
</tr>
<tr>
<td>color</td>
<td>可选，阴影的颜色</td>
</tr>
</tbody></table>
<p>默认值：<code>text-shado:none</code>表示没有阴影</p>
</li>
</ul>
<h5 id="9-2文本换行"><a href="#9-2文本换行" class="headerlink" title="9.2文本换行"></a>9.2文本换行</h5><ul>
<li><p>在<code>CSS3</code>中，我们可以使用<code>white-space</code>属性设置文本换行方式</p>
</li>
<li><p>常用值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>normal</code></td>
<td>文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值）</td>
</tr>
<tr>
<td><code>pre</code></td>
<td>原样输出，与<code>pre</code>标签的效果相同</td>
</tr>
<tr>
<td><code>pre-wrap</code></td>
<td>在<code>pre</code>效果的基础上，超出元素边界自动换行</td>
</tr>
<tr>
<td><code>pre-line</code></td>
<td>在<code>pre</code>效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略</td>
</tr>
<tr>
<td><code>nowrap</code></td>
<td>强制不换行</td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="9-3文本溢出"><a href="#9-3文本溢出" class="headerlink" title="9.3文本溢出"></a>9.3文本溢出</h5><ul>
<li><p>在CSS3中，我们可以使用<code>text-overflow</code>属性设置文本溢出时的呈现模式</p>
</li>
<li><p>常用值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>clip</code></td>
<td>当内联内容溢出时，将溢出部分裁剪掉（默认值）</td>
</tr>
<tr>
<td><code>ellipsis</code></td>
<td>当内联内容溢出块容器时，将溢出部分替换为….</td>
</tr>
</tbody></table>
<blockquote>
<p>注意：要使得<code>text-overflow</code>属性生效，块容器必须显示定义<code>overflow</code>为非<code>visible</code>值，<code>white-space</code>为<code>nowrap</code>值</p>
</blockquote>
</li>
</ul>
<h5 id="9-4文本修饰"><a href="#9-4文本修饰" class="headerlink" title="9.4文本修饰"></a>9.4文本修饰</h5><ul>
<li><p>CSS3升级了<code>text-decoration</code>属性，让其变成了复合属性</p>
<p><code>text-decoration: text-decoration-line || text-decoration-style || text-decoration-color</code></p>
</li>
<li><p>子属性</p>
<ul>
<li><p><strong>text-decoration-line</strong>设置文本装饰线的位置</p>
</li>
<li><p><code>none</code>：指定文字无装饰（默认值）</p>
</li>
<li><p><code>underline</code>：指定文字的装饰符是下划线</p>
</li>
<li><p><code>overline</code>：指定文字的装饰符是上划线</p>
</li>
<li><p><code>line-through</code>：指定文字的装饰符是贯穿线</p>
</li>
<li><p><strong>text-decoration-style</strong>文本装饰线条的形状</p>
<ul>
<li><code>solid</code>：实线</li>
<li><code>double</code>：双线</li>
<li><code>dotted</code>：点状线条</li>
<li><code>dashed</code>：虚线</li>
<li><code>wavy</code>：破浪线</li>
</ul>
</li>
<li><p><strong>text-decoration-color</strong>文本装修线条颜色</p>
</li>
</ul>
</li>
</ul>
<h5 id="9-5文本描边"><a href="#9-5文本描边" class="headerlink" title="9.5文本描边"></a>9.5文本描边</h5><ul>
<li>注意：文字描边功能仅webkit内核浏览器支持<ul>
<li><code>-webkit-text-stroke-width</code>：设置文字描边的宽度，写长度值</li>
<li><code>-webkit-text-stroke-color</code>：设置文字描边的颜色，写颜色值</li>
<li><code>-webkit-text-stroke</code>：复合属性，设置文字描边宽度和颜色</li>
</ul>
</li>
</ul>
<h4 id="10-新增渐变"><a href="#10-新增渐变" class="headerlink" title="10.新增渐变"></a>10.新增渐变</h4><h5 id="10-1线性渐变"><a href="#10-1线性渐变" class="headerlink" title="10.1线性渐变"></a>10.1线性渐变</h5><ul>
<li>多个颜色之间的渐变，默认从上到下渐变</li>
<li><code>background-image: liner-gradient(red,yellow,green);</code></li>
<li>使用关键字设置线性渐变的方向**(to xxx)**<ul>
<li><code>background-image: liner-gradient(to top,red,yellow,green);</code></li>
<li><code>background-image: liner-gradient(to right top,red,yellow,green);</code></li>
</ul>
</li>
<li>使用角度设置线性渐变方向<ul>
<li><code>background-image: liner-gradient(30deg,red,yellow,green);</code></li>
</ul>
</li>
<li>调整开始渐变的位置<ul>
<li><code>background-image: liner-gradient(red 50px,yellow 100px,green 150px);</code></li>
</ul>
</li>
</ul>
<h5 id="10-2径向渐变"><a href="#10-2径向渐变" class="headerlink" title="10.2径向渐变"></a>10.2径向渐变</h5><ul>
<li>多个颜色之间的渐变，默认从圆心四散（注意：不一定是正圆，要看容器本身宽高比）</li>
<li><code>background-image:radial-gradient(red,yellow,green)</code></li>
<li>使用关键字调整渐变圆的圆心位置<ul>
<li><code>background-image:radial-gradient(at right top,red,yellow,green)</code></li>
</ul>
</li>
<li>使用像素值调整渐变圆的圆心位置<ul>
<li><code>background-image:radial-gradient(at 100px 50px,red,yellow,green)</code></li>
</ul>
</li>
<li>调整渐变形状为正圆<ul>
<li><code>background-image:radial-gradient(circle,red,yellow,green)</code></li>
</ul>
</li>
<li>调整形状的半径<ul>
<li><code>background-image:radial-gradient(50px 100px,red,yellow,green)</code></li>
</ul>
</li>
<li>调整开始渐变的位置<ul>
<li><code>background-image:radial-gradient(red 50px,yellow 100px,green 150px)</code></li>
</ul>
</li>
</ul>
<h5 id="10-3重复渐变"><a href="#10-3重复渐变" class="headerlink" title="10.3重复渐变"></a>10.3重复渐变</h5><ul>
<li>在没有发生渐变的区域，重新开始渐变，就是重复渐变</li>
<li><code>background-image:repeating-radial-gradient(red 50px,yellow 100px,green 150px)</code></li>
</ul>
<h4 id="11-web字体"><a href="#11-web字体" class="headerlink" title="11.web字体"></a>11.web字体</h4><ul>
<li><p>基本用法：</p>
<ul>
<li><p>可以通过@font-face指定字体的具体地址，浏览器会自动下载该字体，这样就不会依赖用户电脑上的字体了</p>
</li>
<li><p>语法（简写方式）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span>&#123;</span><br><span class="line">	<span class="attribute">font-family</span>:<span class="string">&quot;情书字体&quot;</span>;</span><br><span class="line">	<span class="attribute">src</span>:<span class="built_in">url</span>(<span class="string">../webfont.ttf</span>)<span class="built_in">format</span>(<span class="string">&#x27;webfont&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>定制字体</p>
<ul>
<li>中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制</li>
<li>可使用阿里Web字体定制工具：<a target="_blank" rel="noopener" href="https://www.iconfont.cn/webfont">https://www.iconfont.cn/webfont</a></li>
</ul>
</li>
<li><p>字体图标：</p>
<ul>
<li><p>相比图片更加清晰</p>
</li>
<li><p>灵活性更高，更加方便改变大小、颜色、风格等</p>
</li>
<li><p>兼容性好，IE也能支持 </p>
<blockquote>
<p>字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<h4 id="12-2D变换"><a href="#12-2D变换" class="headerlink" title="12.2D变换"></a>12.<strong>2D</strong>变换</h4><h5 id="12-1变换位移"><a href="#12-1变换位移" class="headerlink" title="12.1变换位移"></a>12.1变换位移</h5><p><code>2D</code>位移可以改变元素的位置，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性<code>transform</code></p>
</li>
<li><p>编写<code>transform</code>的具体值，相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>translateX</code></td>
<td>设置水平方向位移，需指定长度值，若指定的是百分比，是参考自身宽度的百分比</td>
</tr>
<tr>
<td><code>translateY</code></td>
<td>设置垂直方向位移，需指定长度值，若指定的是百分比，是参考自身高度的百分比</td>
</tr>
<tr>
<td><code>translate</code></td>
<td>一个值代表水平方向，两个值代表：水平和垂直方向</td>
</tr>
</tbody></table>
</li>
<li><p>注意点</p>
<blockquote>
<ol>
<li><p>位移与相对定位很相似，都不会脱离文档流，不会影响到其他元素</p>
</li>
<li><p>与相对定位的区别，相对定位的百分比值，参考的是其父元素，定位的百分比值，参考的是其自身</p>
</li>
<li><p>浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高</p>
</li>
<li><p>transform可以链式编写，例如：</p>
<p><code>transform:translateX(30px) translateY(40px)</code></p>
</li>
<li><p>位移对行内元素无效</p>
</li>
<li><p>位移配合定位，可实现水平垂直居中</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">	<span class="attribute">position</span>:absolute;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">top</span>:<span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">transform</span>:<span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="12-2变换缩放"><a href="#12-2变换缩放" class="headerlink" title="12.2变换缩放"></a>12.2变换缩放</h5><p><code>2D</code>缩放是指：让元素放大或缩小，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性，transform</p>
</li>
<li><p>编写transform的具体值，相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>sacleX</code></td>
<td>设置水平方向的缩放比例，值为一个数值，1表示不缩放，大于1放大，小于1缩小</td>
</tr>
<tr>
<td><code>sacleY</code></td>
<td>设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小</td>
</tr>
<tr>
<td><code>scale</code></td>
<td>同时设置水平方向，垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放，两个值分别代表：水平缩放，垂直缩放</td>
</tr>
</tbody></table>
</li>
<li><p>注意点：</p>
<blockquote>
<ol>
<li><code>scale</code>的值，是支持写负数的，但几乎不用，因为容易让人产生误解</li>
<li>借助缩放，可实现小于12px的文字</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="12-3变换旋转"><a href="#12-3变换旋转" class="headerlink" title="12.3变换旋转"></a>12.3变换旋转</h5><p>2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性：<code>transform</code></p>
</li>
<li><p>编写<code>transform</code>的具体值，相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>rotale</code></td>
<td>设置旋转角度，需指定一个角度值（<code>deg</code>），正值顺时针，负值逆时针</td>
</tr>
</tbody></table>
<blockquote>
<p>注意：<code>rotateZ(20deg)</code>相当于<code>rotate(20deg)</code>，当然到了<code>3D</code>变换的时候，还能写<code>rotate(x,x,x)</code></p>
</blockquote>
</li>
</ul>
<h5 id="12-4变换扭曲"><a href="#12-4变换扭曲" class="headerlink" title="12.4变换扭曲"></a>12.4变换扭曲</h5><p><code>2D</code>扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性<code>transform</code></p>
</li>
<li><p>编写<code>transform</code>的具体值，相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>shewX</code></td>
<td>设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯</td>
</tr>
<tr>
<td><code>shewY</code></td>
<td>设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯</td>
</tr>
<tr>
<td><code>skew</code></td>
<td>一个值代表<code>skewX</code>,两个值分别代表：<code>skewX</code>、<code>skewY</code></td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="12-5多重变换"><a href="#12-5多重变换" class="headerlink" title="12.5多重变换"></a>12.5多重变换</h5><ul>
<li><p>多个变换，可以同时使用一个transform来编写</p>
</li>
<li><p><code>transform:translate(-50%,-50%)rotatr(45deg);</code></p>
<blockquote>
<p>注意点：多重变换时，建议最后旋转</p>
</blockquote>
</li>
</ul>
<h5 id="12-6变换原点"><a href="#12-6变换原点" class="headerlink" title="12.6变换原点"></a>12.6变换原点</h5><ul>
<li><p>元素变换时，默认的原点是元素的中心，使用<code>transform-origin</code>可以设置变换的原点</p>
</li>
<li><p>修改变换原点对位移没有影响，对旋转和缩放会产生影响</p>
</li>
<li><p>如果提供两个值，第一个用于横坐标、第二个用于纵坐标</p>
</li>
<li><p>如果值提供一个，若是像素值，表示横坐标，纵坐标去<code>50%</code>；若是关键字，则另一个坐标取<code>50%</code></p>
<blockquote>
<ol>
<li><code>transform-origin：50% 50%</code>，变换原点在元素的中心位置，百分比是相对于自身 – – 默认值</li>
<li><code>transform-origin：left top</code>，变换原点在元素的左上角</li>
<li><code>transform-origin：50px 50px</code>，变换原点距离元素左上角<code>50px</code> <code>50px</code>的位置</li>
<li><code>transform-origin：0</code>，只写一个值的时候，第二个值默认为<code>50%</code></li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="13-3D变换"><a href="#13-3D变换" class="headerlink" title="13.3D变换"></a>13.<strong>3D</strong>变换</h4><h5 id="13-1空间与景深"><a href="#13-1空间与景深" class="headerlink" title="13.1空间与景深"></a>13.1空间与景深</h5><ul>
<li><p>开启3D空间</p>
<ul>
<li><p>重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间！</p>
<blockquote>
<p>使用<code>transform-style</code>开启3D空间，可选值如下：</p>
<ul>
<li><code>flat</code>：让子元素位于此元素的二维平面内（2D空间）– – 默认值</li>
<li><code>preserve-3d</code>：让子元素位于此元素的三维空间内（3D空间）</li>
</ul>
</blockquote>
</li>
</ul>
</li>
<li><p>设置景深</p>
<ul>
<li><p>何为景深？– – 指定观察者与<code>z=0</code>平面的距离，能让发生<code>3D</code>变换的元素，产生透视效果，看来更加立体</p>
<blockquote>
<p>使用<code>perspective</code>设置景深，可选值如下：</p>
<ul>
<li><code>none</code>：不指定透视– –（默认值）</li>
<li>长度值：指定观察者距离<code>z=0</code>平面的距离，不允许负值</li>
</ul>
<p>注意：<code>perspective</code>设置发生<code>3D</code>变换元素的父元素！</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<h5 id="13-2透视点位置"><a href="#13-2透视点位置" class="headerlink" title="13.2透视点位置"></a>13.2透视点位置</h5><p>所谓透视点的位置就是观察者的位置；默认的透视点在元素的中心</p>
<blockquote>
<p>使用perspective-origin设置观察者位置（透视点的位置），例如：</p>
<p>&#x2F;* 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，如何向下移动400像素看元素）*&#x2F;</p>
<p><code>perspective-origin:400px 300px;</code></p>
<p>注意：通常情况下，我们不需要调整透视点位置</p>
</blockquote>
<h5 id="13-3-位移"><a href="#13-3-位移" class="headerlink" title="13.3 位移"></a>13.3 位移</h5><p><code>3D</code>位移是在<code>2D</code>位移的基础上，可以让元素沿着<code>z</code>轴位移，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性：<code>transform</code></p>
</li>
<li><p>编写<code>transform</code>的具体值，<code>3D</code>相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>translateZ</code></td>
<td>设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比</td>
</tr>
<tr>
<td><code>translate-3d</code></td>
<td>第一个参数对应<code>x</code>轴，第二个参数对应<code>y</code>轴，第三个参数对应<code>z</code>轴，且均不能省略</td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="13-4旋转"><a href="#13-4旋转" class="headerlink" title="13.4旋转"></a>13.4旋转</h5><p><code>3D</code>旋转是在<code>2D</code>旋转的基础上，可以让元素沿着x轴和y轴旋转，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性<code>transform</code></p>
</li>
<li><p>编写<code>transform</code>的具体值，3D相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>rotateX</code></td>
<td>设置x轴旋转角度，需指定一个角度值（deg），面对x轴方向：正值顺时针，负值逆时针</td>
</tr>
<tr>
<td><code>rotateY</code></td>
<td>设置y轴旋转角度，需指定一个角度值（deg），面对x轴方向：正值顺时针，负值逆时针</td>
</tr>
<tr>
<td><code>rotate3d</code></td>
<td>前3个参数分别表示坐标轴：<code>x，y，z，</code>第4个参数表示旋转的角度，参数不允许省略<br>例如：<code>transform:rotate3d(1,1,1,30deg)</code>，意思是：<code>x，y，z</code>分别旋转30度</td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="13-5缩放"><a href="#13-5缩放" class="headerlink" title="13.5缩放"></a>13.5缩放</h5><p>3D缩放是在2D缩放的基础上，可以让元素沿Z轴缩放，具体使用方式如下：</p>
<ul>
<li><p>先给元素添加转换属性transform</p>
</li>
<li><p>编写transform的具体值，3D相关可选值如下：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td>scaleZ</td>
<td>设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1就放大，小于1缩小</td>
</tr>
<tr>
<td>scale3d</td>
<td>第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略</td>
</tr>
</tbody></table>
</li>
</ul>
<h5 id="13-6多重变换"><a href="#13-6多重变换" class="headerlink" title="13.6多重变换"></a>13.6多重变换</h5><p>多个变换，可以同时使用一个transform来编写</p>
<p><code>transform:translateZ(100px),scaleZ(3),rotarey(40deg);</code></p>
<blockquote>
<p>注意点：多重变换时，建议最后旋转</p>
</blockquote>
<h4 id="14-过渡"><a href="#14-过渡" class="headerlink" title="14.过渡"></a>14.过渡</h4><h5 id="14-1-基本使用"><a href="#14-1-基本使用" class="headerlink" title="14.1 基本使用"></a>14.1 基本使用</h5><p>过渡可以在不使用Flash动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式</p>
<ul>
<li><p><strong>transition-property</strong></p>
<ul>
<li><p>作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会有过渡效果</p>
</li>
<li><p>常用值：</p>
<ul>
<li><code>none</code>：不过渡任何属性</li>
<li><code>all</code>：过渡所有能过渡的属性</li>
<li>具体某个属性名：例如：<code>width</code>、<code>height</code>，若有多个以逗号分隔</li>
</ul>
<blockquote>
<p>不是所有的属性都能过渡，值为数字，或者能转为数字的属性，都支持过渡，否则都不支持过渡，常见的支持过渡的属性有：颜色，长度值，百分比、<code>z-index</code>、<code>opacity</code>、2D变换属性、3D变换属性、阴影</p>
</blockquote>
</li>
</ul>
</li>
<li><p><strong>transition-duration</strong></p>
<ul>
<li>作用：设置过渡的持续时间，即：一个状态过渡到另一个状态耗时多少</li>
<li>常用值：<ul>
<li><code>0</code>：没有任何过渡时间– – 默认值</li>
<li><code>s</code>或<code>ms</code>：秒或毫秒</li>
<li>列表：<ul>
<li>如果想让所以属性持续一个时间，那就写一个值</li>
<li>如果想让每个属性持续不同的时间，那就写一个时间的列表</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="14-2高级使用"><a href="#14-2高级使用" class="headerlink" title="14.2高级使用"></a>14.2高级使用</h5><ul>
<li><strong>transition-delay</strong><ul>
<li>作用：指定开始过渡的延迟时间，单位：<code>s</code>或<code>ms</code></li>
</ul>
</li>
<li><strong>transition-timing-function</strong><ul>
<li>作用：设置过渡类型</li>
<li>常用值：<ul>
<li><code>ease</code>：平滑过渡 - -默认值</li>
<li><code>linear</code>：线性过渡</li>
<li><code>ease-in</code>：慢-快</li>
<li><code>ease-out</code>：快-慢</li>
<li><code>ease-in-out</code>：慢-快-慢</li>
<li><code>step-start</code>：等同于steps(1,start)</li>
<li><code>step-end</code>：等同于steps(1,end)</li>
<li><code>steps(integer,?)</code>：接受两个参数的步进函数，第一个参数必须是正整数，指定函数的步数，第二个参数的取值可以是<code>start</code>或<code>end</code>，指定每一步的值发生变化的时间点，第二个参数的默认值为end</li>
<li><code>cubic-bezie(number,number,number,number)</code>:特定的贝塞尔曲线类型</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="14-3-复合属性"><a href="#14-3-复合属性" class="headerlink" title="14.3 复合属性"></a>14.3 复合属性</h5><ul>
<li><p>如果设置了一个时间，	表示duration；如果设置了两个时间，第一是duration，第二个是deplay；其他值没有顺序要求</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transition</span>:<span class="number">1s</span> <span class="number">1s</span> linear all;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="15-动画"><a href="#15-动画" class="headerlink" title="15.动画"></a>15.动画</h4><h5 id="15-1帧"><a href="#15-1帧" class="headerlink" title="15.1帧"></a>15.1帧</h5><ul>
<li>一段动画，就是一段时间内连续播放n个画面，每一张画面，我们管它叫做“帧”，一定时间连续快速播放若干个帧，就成了人眼中所看到的动画，同样时间内，播放的帧数越多，画面看起来越流畅</li>
<li>什么是关键帧？– – 关键帧指的是，在一段动画的若干帧中，起到决定性作用的2~3帧</li>
</ul>
<h5 id="15-2动画的基本使用"><a href="#15-2动画的基本使用" class="headerlink" title="15.2动画的基本使用"></a>15.2动画的基本使用</h5><ul>
<li><p>**第一步，定义关键帧(定义动画)**：</p>
<ul>
<li><p>简单定义方式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">@keyfranmes name&#123;</span><br><span class="line">	from&#123;</span><br><span class="line">		/*property1:value1*/</span><br><span class="line">        /*property2:value2*/</span><br><span class="line">	&#125;</span><br><span class="line">	to&#123;</span><br><span class="line">		/*property1:value1*/</span><br><span class="line">        </span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>完整定义方式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyfranmes</span> name&#123;</span><br><span class="line">	<span class="number">0%</span>&#123;</span><br><span class="line">		<span class="comment">/*property1:value1*/</span></span><br><span class="line">        <span class="comment">/*property2:value2*/</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="number">40%</span>&#123;</span><br><span class="line">		<span class="comment">/*property1:value1*/</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="number">80%</span>&#123;</span><br><span class="line">		<span class="comment">/*property1:value1*/</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="number">100%</span>&#123;</span><br><span class="line">		<span class="comment">/*property1:value1*/</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p><strong>第二步：给元素应用动画，用到的属性如下</strong>：</p>
<ul>
<li><code>animation-name</code>：给元素指定具体的动画（具体的关键帧）</li>
<li><code>animation-duration</code>：设置动画所需时间</li>
<li><code>animation-delay</code>：设置动画延迟</li>
</ul>
</li>
</ul>
<h5 id="15-3动画其他属性"><a href="#15-3动画其他属性" class="headerlink" title="15.3动画其他属性"></a>15.3动画其他属性</h5><ul>
<li><p><code>animation-timing-function</code>，设置动画的类型</p>
<ul>
<li>常用值：<ul>
<li><code>ease</code>：平滑过渡 - -默认值</li>
<li><code>linear</code>：线性过渡</li>
<li><code>ease-in</code>：慢-快</li>
<li><code>ease-out</code>：快-慢</li>
<li><code>ease-in-out</code>：慢-快-慢</li>
<li><code>step-start</code>：等同于steps(1,start)</li>
<li><code>step-end</code>：等同于steps(1,end)</li>
<li><code>steps(integer,?)</code>：接受两个参数的步进函数，第一个参数必须是正整数，指定函数的步数，第二个参数的取值可以是<code>start</code>或<code>end</code>，指定每一步的值发生变化的时间点，第二个参数的默认值为end</li>
<li><code>cubic-bezie(number,number,number,number)</code>:特定的贝塞尔曲线类型</li>
</ul>
</li>
</ul>
</li>
<li><p><code>animation-iteration-count</code>，指定动画的播放次数</p>
<ul>
<li>常用值：<ul>
<li><code>number</code>：动画循环次数(n)</li>
<li><code>infinite</code>：无限循环</li>
</ul>
</li>
</ul>
</li>
<li><p><code>animation-direction</code>，指定动画方向</p>
<ul>
<li><p>常用值：</p>
<ul>
<li><code>normal</code>：正常方向（默认）</li>
<li><code>reverse</code>：反方向运行</li>
<li><code>alternate</code>：动画先正常运行再反方向运行，并持续交替运行</li>
<li><code>alternate-reverse</code>：动画先反运行再正方向运行，并交替运行</li>
</ul>
</li>
</ul>
</li>
<li><p><code>animation-fill-mode</code>，设置动画之外的状态</p>
<ul>
<li>常用值：<ul>
<li><code>forwards</code>：设置对象状态为动画结束时的样子</li>
<li><code>backwards</code>：设置对象状态为动画开始时的样子</li>
</ul>
</li>
</ul>
</li>
<li><p><code>animation-play-state</code></p>
<ul>
<li>常用值：<ul>
<li><code>running</code>：运动</li>
<li><code>paused</code>：暂停</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="15-4动画复合属性"><a href="#15-4动画复合属性" class="headerlink" title="15.4动画复合属性"></a>15.4动画复合属性</h5><p>只设置一个时间表示<code>duration</code>，设置两个时间分别是：<code>duration</code>和<code>delay</code>，其他属性没有数量和顺序要求</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.inner</span>&#123;</span><br><span class="line">	<span class="attribute">animation</span>: name <span class="number">3s</span> <span class="number">0.5s</span> linear <span class="number">2</span> alternate-reverse forwards;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="15-5动画和过渡的区别"><a href="#15-5动画和过渡的区别" class="headerlink" title="15.5动画和过渡的区别"></a>15.5动画和过渡的区别</h5><blockquote>
<ol>
<li>过渡需要触发条件，而动画不需要触发条件</li>
<li>动画可以更加精细的去调整效果</li>
</ol>
</blockquote>
<h4 id="16-多列布局"><a href="#16-多列布局" class="headerlink" title="16.多列布局"></a>16.多列布局</h4><ul>
<li>作用：专门用于实现类似于报纸的布局</li>
<li>常用属性如下：<ul>
<li><code>colum-count</code>：指定列数，值是数字</li>
<li><code>colum-width</code>：指定列数，值是长度</li>
<li><code>columns</code>：同时指定列宽和列数，复合属性，值没有数量和顺序要求</li>
<li><code>column-gap</code>：设置列边距，值是长度</li>
<li><code>column-rule-style</code>：设置列与列边框的风格，值与<code>border-style</code>一致</li>
<li><code>column-rule-width</code>：设置列与列边框的宽度，值是长度</li>
<li><code>column-rule-color</code>：设置列边框，复合属性</li>
<li><code>column-span</code>：指定是否跨列，值是<code>none</code>，<code>all</code></li>
</ul>
</li>
</ul>
<h4 id="17-伸缩盒模型"><a href="#17-伸缩盒模型" class="headerlink" title="17.伸缩盒模型"></a>17.伸缩盒模型</h4><h5 id="17-1-伸缩盒模型简介"><a href="#17-1-伸缩盒模型简介" class="headerlink" title="17.1 伸缩盒模型简介"></a>17.1 伸缩盒模型简介</h5><ul>
<li>2009年，W3C提出一种新的盒子模型– – Flexible Box（伸缩盒模型，又称：弹性盒子）</li>
<li>它可以轻松的控制：元素分布方式，元素对齐方式，元素视觉顺序…..</li>
<li>截至目前，除了部分IE浏览器不支持，其他浏览器均已全部支持</li>
<li>伸缩盒模型的出现，逐渐演变出了一套新的布局方案– – flex布局</li>
</ul>
<blockquote>
<p>小贴士：</p>
<ol>
<li>传统布局是指：基于传统盒模型，主要靠：display属性+position属性+float属性</li>
<li>flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上</li>
</ol>
</blockquote>
<h5 id="17-2-伸缩容器与伸缩项目"><a href="#17-2-伸缩容器与伸缩项目" class="headerlink" title="17.2 伸缩容器与伸缩项目"></a>17.2 伸缩容器与伸缩项目</h5><ul>
<li><p><strong>伸缩容器</strong>：开启了<code>flex</code>的元素，就是：伸缩容器</p>
<blockquote>
<ol>
<li>给元素设置：<code>display:flex</code>或<code>display:inline-flex</code>，该元素就变为l伸缩容器</li>
<li><code>display:inline-flex</code>很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器</li>
<li>一个元素可以同时是：伸缩容器，伸缩项目</li>
</ol>
</blockquote>
</li>
<li><p><strong>伸缩项目</strong>：伸缩容器所有的子元素自动成为了：伸缩项目</p>
<blockquote>
<ol>
<li>仅伸缩容器的子元素成为了伸缩项目，孙子元素，重孙子元素等后代，不是伸缩项目</li>
<li>无论原来是那种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”</li>
</ol>
</blockquote>
</li>
</ul>
<h5 id="17-3主轴方向"><a href="#17-3主轴方向" class="headerlink" title="17.3主轴方向"></a>17.3主轴方向</h5><p><strong>主轴与侧轴</strong></p>
<ul>
<li>主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）</li>
<li>侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）</li>
</ul>
<p><strong>主轴方向</strong></p>
<ul>
<li><p>属性名：<code>flex-direction</code></p>
</li>
<li><p>常用值如下：</p>
<ul>
<li>row：主轴方向水平从左到右– – 默认值</li>
<li>row-reverse：主轴方向水平从右到左</li>
<li>column：主轴方向垂直从上到下</li>
<li>column-reverse：主轴方向垂直从下到上</li>
</ul>
<blockquote>
<p>注意：改变了主轴的方向，侧轴方向也随之改变</p>
</blockquote>
</li>
</ul>
<h5 id="17-4主轴换行方式"><a href="#17-4主轴换行方式" class="headerlink" title="17.4主轴换行方式"></a>17.4主轴换行方式</h5><ul>
<li>属性名：<code>flex-wrap</code></li>
<li>常用值如下<ul>
<li><code>nowrap</code>：默认值，不换行<strong>（全部挤在一行）</strong></li>
<li><code>wrap</code>：自动换行，伸缩容器不够自动换行</li>
<li><code>wrap-reverse</code>：反向换行</li>
</ul>
</li>
</ul>
<h5 id="17-5-flex-flow"><a href="#17-5-flex-flow" class="headerlink" title="17.5 flex-flow"></a>17.5 flex-flow</h5><ul>
<li><p><code>flex-flow</code>是一个复合属性，复合了<code>flex-direction</code>和<code>flex-warp</code>两个属性，值没有顺序要求</p>
<p><code>flex-flow:row warp;</code></p>
</li>
</ul>
<h5 id="17-6主轴对齐方式"><a href="#17-6主轴对齐方式" class="headerlink" title="17.6主轴对齐方式"></a>17.6主轴对齐方式</h5><ul>
<li>属性名：<code>justify-context</code></li>
<li>常用值如下：<ul>
<li><code>flex-start</code>：主轴起点对齐– – 默认值</li>
<li><code>flex-end</code>：主轴终点对齐</li>
<li><code>center</code>：居中对齐</li>
<li><code>space-between</code>：均匀分布，两端对齐</li>
<li><code>space-around</code>：均匀分布，两端距离是中间距离的一半</li>
<li><code>space-evenly</code>：均匀分布，两端距离与中间距离一致</li>
</ul>
</li>
</ul>
<h5 id="17-7-侧轴对齐"><a href="#17-7-侧轴对齐" class="headerlink" title="17.7 侧轴对齐"></a>17.7 侧轴对齐</h5><ul>
<li>只有一行的情况下<ul>
<li>所需属性：<code>align-items</code></li>
<li>常用值如下：<ul>
<li><code>flex-start</code>：侧轴的起点对齐</li>
<li><code>flex-end</code>：侧轴的终点对齐</li>
<li><code>center</code>：侧轴的中点对齐</li>
<li><code>baseline</code>：伸缩项目的第一行文字的基线对齐</li>
<li><code>stretch</code>：如果伸缩项目未设置高度，将占满整个容器的高度– – 默认值</li>
</ul>
</li>
</ul>
</li>
<li>多行情况下：<ul>
<li>所需属性：align-content</li>
<li>常用值如下：<ul>
<li><code>flex-start</code>：侧轴的起点对齐</li>
<li><code>flex-end</code>：侧轴的终点对齐</li>
<li><code>center</code>：侧轴的中点对齐</li>
<li><code>space-between</code>：与侧轴两端对齐中间平均分配</li>
<li><code>space-around</code>：伸缩项目间的距离相等，比距边缘大一倍</li>
<li><code>space-evenly</code>：在侧轴上完全平分</li>
<li><code>stretch</code>：占满整个侧轴 – – 默认值</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="17-8项目在主轴的基准长度"><a href="#17-8项目在主轴的基准长度" class="headerlink" title="17.8项目在主轴的基准长度"></a>17.8项目在主轴的基准长度</h5><ul>
<li><p><code>flex-basis</code></p>
<ul>
<li><p>概念：<code>flex-basis</code>设置的是主轴方向的基准长度，会让宽度或高度失效</p>
<blockquote>
<p>备注：主轴横向：宽度失效；主轴纵向：高度失效；</p>
</blockquote>
</li>
</ul>
</li>
<li><p>作用：浏览器会根据这个属性设置的值去，就是主轴上是否有多余空间，默认值是auto，即：伸缩项目的宽或高</p>
</li>
</ul>
<h5 id="17-9-伸缩性"><a href="#17-9-伸缩性" class="headerlink" title="17.9 伸缩性"></a>17.9 伸缩性</h5><ul>
<li><p><code>flex-grow</code><strong>（伸）</strong></p>
<ul>
<li>概念：<code>flex-grow</code>定义伸缩项目的放大比例，默认是0，即：纵使主轴存在剩余空间，也不拉伸（放大）</li>
<li>规则：<ul>
<li>若所有伸缩项目的<code>flex-grow</code>值都为1，则：它们将等分剩余空间（如果还有空间的话）</li>
<li>若三个伸缩项目<code>flex-grow</code>值分别为<code>1</code>、<code>2</code>、<code>3</code>，则：分别瓜分到：<code>1/6、2/6、3/6</code>的空间</li>
</ul>
</li>
</ul>
</li>
<li><p><code>flex-shrink</code><strong>（缩）</strong></p>
<ul>
<li><p>概念：flex-shrink定义了项目的压缩比例，默认是1，即：如果空间不足，该项目将会缩小</p>
</li>
<li><p>收缩项目的计算，略微复杂一点，我们拿一个场景举例</p>
<blockquote>
<p>例如：</p>
<p>三个收缩项目，宽度分别为:<code>200px</code>,<code>300px</code>、<code>200px</code>,它们的flex-shrink值分别为:<code>1</code>、<code>2</code>、<code>3</code>若想刚好容纳下三个项目，需要总宽度为<code>700px</code>，但日前容器只有<code>400px</code>，还差<code>300px</code>所以每个人都要收缩一下才可以放下，具体收缩的值,这样计算:</p>
<ol>
<li><p>计算分母:<code>(200×1) +(300×2) +(200×3)= 1400</code></p>
</li>
<li><p>计算比例:<br>项目一:<code>(200×1)/1488 =比例值1</code></p>
<p>项目二:<code>(300×2) /1408 =比例值2</code></p>
<p>项目三:<code>(200×3)/1488 =比例值3</code></p>
</li>
<li><p>计算最终收缩大小:<br>项目一需要收缩:<code>比例值1 x 300</code></p>
<p>项目二需要收缩:<code>比例值2× 300</code></p>
<p>项目三需要收缩:<code>比例值3 x 300</code></p>
</li>
</ol>
</blockquote>
</li>
</ul>
</li>
</ul>
<h5 id="17-10-flex-复合属性"><a href="#17-10-flex-复合属性" class="headerlink" title="17.10**flex**复合属性"></a>17.10**<code>flex</code>**复合属性</h5><ul>
<li><code>flex</code>是复合属性，复合了：<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code>三个属性，默认值为：<code>0 1 auto</code><ul>
<li>如果写<code>flex:1 1 auto</code>，则可以简写为：<code>flex:auto</code></li>
<li>如果写<code>flex:1 1 0</code>，则可以简写为：<code>flex:1</code></li>
<li>如果写<code>flex:0 0 auto</code>，则可简写为：<code>flex:none</code></li>
<li>如果写<code>flex:0 1auto</code>，则可简写为：<code>flex: 0 auto</code></li>
</ul>
</li>
</ul>
<h5 id="17-11项目排序与单独对齐"><a href="#17-11项目排序与单独对齐" class="headerlink" title="17.11项目排序与单独对齐"></a>17.11项目排序与单独对齐</h5><ul>
<li><code>order</code>属性定义项目的排序，数值越小，排序越靠前，默认为0</li>
<li>通过<code>align-self</code>属性，可以单独调整某个伸缩项目的对齐方式</li>
<li>默认值为<code>auto</code>，表示继承父亲的<code>align-item</code>属性</li>
</ul>
<h4 id="18-响应式布局"><a href="#18-响应式布局" class="headerlink" title="18.响应式布局"></a>18.响应式布局</h4><ul>
<li><p>媒体类型</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>all</code></td>
<td>检测所有设备</td>
</tr>
<tr>
<td><code>screen</code></td>
<td>检测电子设备，包括：电脑屏幕、平板屏幕、手机屏幕等</td>
</tr>
<tr>
<td><code>print</code></td>
<td>检测打印机</td>
</tr>
</tbody></table>
<blockquote>
<p>完整列表请参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media">https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media</a></p>
</blockquote>
</li>
<li><p>媒体特性</p>
<ul>
<li><table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>width</code></td>
<td>检测窗口宽度</td>
</tr>
<tr>
<td><code>max-width</code></td>
<td>检测窗口最大宽度</td>
</tr>
<tr>
<td><code>min-width</code></td>
<td>检测窗口最小宽度</td>
</tr>
<tr>
<td><code>height</code></td>
<td>检测窗口高度</td>
</tr>
<tr>
<td><code>max-height</code></td>
<td>检测窗口最大高度</td>
</tr>
<tr>
<td><code>min-height</code></td>
<td>检测窗口最小高度</td>
</tr>
<tr>
<td><code>device-width</code></td>
<td>检测设备屏幕宽度</td>
</tr>
<tr>
<td><code>max-device-width</code></td>
<td>检测设备屏幕最大宽度</td>
</tr>
<tr>
<td><code>min-device-width</code></td>
<td>检测设备屏幕最小宽度</td>
</tr>
<tr>
<td><code>orientation</code></td>
<td>检测视口的旋转方向（是否横屏）<br><code>1.portrait</code>：视口处于纵向，即高度大于等于宽度<br><code>2.landscape</code>：视口处于横向，即宽度大于高度</td>
</tr>
</tbody></table>
<blockquote>
<p>完整列表请参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media">https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media</a></p>
</blockquote>
</li>
</ul>
</li>
<li><p>运算符</p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><code>and</code></td>
<td>并且</td>
</tr>
<tr>
<td><code>，</code>或<code>on</code></td>
<td>或</td>
</tr>
<tr>
<td><code>not</code></td>
<td>否定</td>
</tr>
<tr>
<td><code>only</code></td>
<td>肯定</td>
</tr>
</tbody></table>
</li>
</ul>
<h4 id="19-BFC（重要）"><a href="#19-BFC（重要）" class="headerlink" title="19.BFC（重要）"></a>19.BFC（重要）</h4><ul>
<li><p><strong>理解</strong></p>
<blockquote>
<ol>
<li><code>BFC</code>是<code>Block Formatting Context</code>（块级格式上下文），可以理解成元素的一个<strong>“特异功能”</strong></li>
<li>该“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该<strong>“特异功能”</strong>被激活</li>
<li>所谓激活<strong>“特异功能”</strong>，专业点就是：该元素创建了<code>BFC</code>（又称：开启了<code>BFC</code>）</li>
</ol>
</blockquote>
</li>
<li><p><strong>开起来BFC能解决什么问题</strong></p>
<ul>
<li>元素开启BFC后，其子元素不会再产生margin塌陷问题</li>
<li>元素开启BFC后，自己不会被其他浮动元素所覆盖</li>
<li>元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷</li>
</ul>
</li>
<li><p><strong>如何开启BFC</strong></p>
<ul>
<li>根元素</li>
<li>浮动元素</li>
<li>绝对定位、固定定位的元素</li>
<li>行内块元素</li>
<li>表单单元格：<code>table、thead、tbody、tfoot、th、td、tr、caption</code></li>
<li><code>overflow</code>的值不为<code>visible</code>的块元素</li>
<li>伸缩项目</li>
<li>多列项目</li>
<li><code>column-span</code>为<code>all</code>的元素（即使该元素没有包裹在多列容器中）</li>
<li><code>display</code>的值，设置为<code>flow-root</code></li>
</ul>
</li>
</ul>

  </div>
  <div id="copyright"><style>#easter-egg{border:0;padding:10px 0;position:relative}#easter-egg::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"本文结束 \f1b0  感谢阅读";position:absolute;
padding:0 10px;
line-height:1px;
white-space:nowrap;
left:50%;
transform:translateX(-50%)}
</style><hr id="easter-egg"><blockquote style="padding:0">
    <p>作者: <a href="https://mihaoyou.gitee.io">
        <a1>云静</a1>
    </a></p>
    <p>版权声明: 本博客所有文章除特别声明外, 均采用 <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)"><a1>CC BY-NC-ND 4.0</a1></a> 许可协议, 转载请注明出处！</p></blockquote><hr></div>
</article>


    <div class="blog-post-comments">
        <div id="utterances_thread">
            <noscript>加载评论需要在浏览器启用 JavaScript 脚本支持。</noscript>
        </div>
    </div>


        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81CSS%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">一、CSS基础</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E7%AE%80%E4%BB%8B"><span class="toc-number">1.1.</span> <span class="toc-text">1.CSS简介</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-CSS%E7%9A%84%E7%BC%96%E5%86%99%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.2.</span> <span class="toc-text">2.CSS的编写位置</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.1.</span> <span class="toc-text">行内样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.2.</span> <span class="toc-text">内部样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.2.3.</span> <span class="toc-text">外部样式</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">1.3.</span> <span class="toc-text">3.样式表的优先级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83"><span class="toc-number">1.4.</span> <span class="toc-text">4.语法规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-CSS%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC"><span class="toc-number">1.5.</span> <span class="toc-text">5.CSS代码风格</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.</span> <span class="toc-text">CSS选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%85%E6%8B%AC%EF%BC%9A"><span class="toc-number">2.1.</span> <span class="toc-text">基本选择器包括：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E9%80%9A%E9%85%8D%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.1.</span> <span class="toc-text">通配选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.2.</span> <span class="toc-text">元素选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.3.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.1.4.</span> <span class="toc-text">id选择器</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.</span> <span class="toc-text">复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BA%A4%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.1.</span> <span class="toc-text">交集选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.2.</span> <span class="toc-text">并集选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.3.</span> <span class="toc-text">后代选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%90%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.4.</span> <span class="toc-text">子代选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.5.</span> <span class="toc-text">兄弟选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%9B%B8%E9%82%BB%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.5.1.</span> <span class="toc-text">相邻兄弟选择器：</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.5.2.</span> <span class="toc-text">通用兄弟选择器：</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.6.</span> <span class="toc-text">属性选择器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.7.</span> <span class="toc-text">伪类选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BC%AA%E7%B1%BB%E5%8A%A8%E6%80%81%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">2.2.7.1.</span> <span class="toc-text">常用的伪类动态选择器：</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.2.</span> <span class="toc-text">结构伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E5%90%A6%E5%AE%9A%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.3.</span> <span class="toc-text">否定伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#UI%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.4.</span> <span class="toc-text">UI伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%9B%AE%E6%A0%87%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.5.</span> <span class="toc-text">目标伪类</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E8%AF%AD%E8%A8%80%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.2.7.6.</span> <span class="toc-text">语言伪类</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.2.8.</span> <span class="toc-text">伪元素选择器</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">2.3.</span> <span class="toc-text">选择器优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7"><span class="toc-number">3.</span> <span class="toc-text">CSS三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%B1%82%E5%8F%A0%E6%80%A7"><span class="toc-number">3.1.</span> <span class="toc-text">1.层叠性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E7%BB%A7%E6%89%BF%E6%80%A7"><span class="toc-number">3.2.</span> <span class="toc-text">2.继承性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">3.3.</span> <span class="toc-text">3.优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E9%A2%9C%E8%89%B2"><span class="toc-number">4.</span> <span class="toc-text">CSS颜色</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A2%9C%E8%89%B2%E7%9A%84%E8%A1%A8%E7%A4%BA"><span class="toc-number">4.1.</span> <span class="toc-text">颜色的表示</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%B8%80%EF%BC%9A%E9%A2%9C%E8%89%B2%E5%90%8D"><span class="toc-number">4.1.1.</span> <span class="toc-text">表达方式一：颜色名</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%BA%8C%EF%BC%9Argb-%E6%88%96-rgba"><span class="toc-number">4.1.2.</span> <span class="toc-text">表达方式二：rgb 或 rgba</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E4%B8%89%EF%BC%9AHEX%E6%88%96HEXA"><span class="toc-number">4.1.3.</span> <span class="toc-text">表达方式三：HEX或HEXA</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%A8%E8%BE%BE%E6%96%B9%E5%BC%8F%E5%9B%9B%EF%BC%9AHSL%E6%88%96HSLA"><span class="toc-number">4.1.4.</span> <span class="toc-text">表达方式四：HSL或HSLA</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%B8%B8%E8%A7%81%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7"><span class="toc-number">5.</span> <span class="toc-text">CSS常见字体属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F"><span class="toc-number">5.1.</span> <span class="toc-text">1.字体大小</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%AD%97%E4%BD%93%E6%97%8F"><span class="toc-number">5.2.</span> <span class="toc-text">2.字体族</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%AD%97%E4%BD%93%E9%A3%8E%E6%A0%BC"><span class="toc-number">5.3.</span> <span class="toc-text">3.字体风格</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86"><span class="toc-number">5.4.</span> <span class="toc-text">4.字体粗细</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E5%AD%97%E4%BD%93%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95"><span class="toc-number">5.5.</span> <span class="toc-text">5.字体复合写法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7"><span class="toc-number">6.</span> <span class="toc-text">常用文本属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2%EF%BC%9A"><span class="toc-number">6.1.</span> <span class="toc-text">1.文本颜色：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%96%87%E6%9C%AC%E9%97%B4%E8%B7%9D"><span class="toc-number">6.2.</span> <span class="toc-text">2.文本间距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0"><span class="toc-number">6.3.</span> <span class="toc-text">3.文本修饰</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B"><span class="toc-number">6.4.</span> <span class="toc-text">4.文本缩进</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90-%E6%B0%B4%E5%B9%B3%E6%96%B9%E5%90%91"><span class="toc-number">6.5.</span> <span class="toc-text">5.文本对齐_水平方向</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E8%A1%8C%E9%AB%98"><span class="toc-number">6.6.</span> <span class="toc-text">6.行高</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E8%A1%8C%E9%AB%98%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">6.7.</span> <span class="toc-text">7.行高注意事项</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90-%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91"><span class="toc-number">6.8.</span> <span class="toc-text">8.文本对齐_垂直方向</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-vertical-align"><span class="toc-number">6.9.</span> <span class="toc-text">9.vertical-align</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">7.</span> <span class="toc-text">列表相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.</span> <span class="toc-text">表格相关属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E8%BE%B9%E6%A1%86%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.1.</span> <span class="toc-text">1.边框相关属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E8%A1%A8%E6%A0%BC%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">8.2.</span> <span class="toc-text">2.表格相关属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">9.</span> <span class="toc-text">背景相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">10.</span> <span class="toc-text">鼠标相关属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">11.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E9%95%BF%E5%BA%A6%E5%8D%95%E4%BD%8D"><span class="toc-number">11.1.</span> <span class="toc-text">1.CSS中常用的长度单位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">11.2.</span> <span class="toc-text">2.元素的显示模式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%80%BB%E7%BB%93%E5%90%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A0%B7%E5%BC%8F"><span class="toc-number">11.3.</span> <span class="toc-text">3.总结各元素的显示样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">11.4.</span> <span class="toc-text">4.修改元素显示模式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%9A%84%E7%BB%84%E6%88%90%E9%83%A8%E5%88%86"><span class="toc-number">11.5.</span> <span class="toc-text">5.盒子模型的组成部分</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E7%9B%92%E5%AD%90%E5%86%85%E5%AE%B9%E5%8C%BA"><span class="toc-number">11.6.</span> <span class="toc-text">6.盒子内容区</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E9%BB%98%E8%AE%A4%E5%AE%BD%E5%BA%A6"><span class="toc-number">11.7.</span> <span class="toc-text">7.默认宽度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E7%9B%92%E5%AD%90%E7%9A%84%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="toc-number">11.8.</span> <span class="toc-text">8.盒子的内边距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E7%9B%92%E5%AD%90%E7%9A%84%E8%BE%B9%E6%A1%86"><span class="toc-number">11.9.</span> <span class="toc-text">9.盒子的边框</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E7%9B%92%E5%AD%90%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="toc-number">11.10.</span> <span class="toc-text">10.盒子外边距</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-margin%E5%A1%8C%E9%99%B7%E9%97%AE%E9%A2%98"><span class="toc-number">11.11.</span> <span class="toc-text">11.margin塌陷问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-margin%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98"><span class="toc-number">11.12.</span> <span class="toc-text">12.margin合并问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-%E5%A4%84%E7%90%86%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA"><span class="toc-number">11.13.</span> <span class="toc-text">13.处理内容溢出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">11.14.</span> <span class="toc-text">14.隐藏元素的两种方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E6%A0%B7%E5%BC%8F%E7%9A%84%E7%BB%A7%E6%89%BF"><span class="toc-number">11.15.</span> <span class="toc-text">15.样式的继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F"><span class="toc-number">11.16.</span> <span class="toc-text">16.默认样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-CSS%E5%B8%83%E5%B1%80%E6%8A%80%E5%B7%A7"><span class="toc-number">11.17.</span> <span class="toc-text">17.CSS布局技巧</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4%E7%9A%84%E7%A9%BA%E7%99%BD%E9%97%AE%E9%A2%98"><span class="toc-number">11.18.</span> <span class="toc-text">18.元素之间的空白问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%E7%9A%84%E5%B9%BD%E7%81%B5%E7%A9%BA%E7%99%BD%E9%97%AE%E9%A2%98"><span class="toc-number">11.19.</span> <span class="toc-text">19.行内块元素的幽灵空白问题</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8"><span class="toc-number">12.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%85%83%E7%B4%A0%E6%B5%AE%E5%8A%A8%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">12.1.</span> <span class="toc-text">1.元素浮动的特点</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%B5%AE%E5%8A%A8%E5%90%8E%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">12.2.</span> <span class="toc-text">2.浮动后的影响</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E8%A7%A3%E5%86%B3%E6%B5%AE%E5%8A%A8%E4%BA%A7%E7%94%9F%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">12.3.</span> <span class="toc-text">3.解决浮动产生的影响</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.</span> <span class="toc-text">定位</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.1.</span> <span class="toc-text">1.相对定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.2.</span> <span class="toc-text">2.绝对定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.3.</span> <span class="toc-text">3.固定定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E7%B2%98%E6%80%A7%E5%AE%9A%E4%BD%8D"><span class="toc-number">13.4.</span> <span class="toc-text">4.粘性定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E5%B1%82%E7%BA%A7"><span class="toc-number">13.5.</span> <span class="toc-text">定位层级</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%89%B9%E6%AE%8A%E5%BA%94%E7%94%A8"><span class="toc-number">13.6.</span> <span class="toc-text">定位的特殊应用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B1%80"><span class="toc-number">14.</span> <span class="toc-text">布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%89%88%E5%BF%83"><span class="toc-number">14.1.</span> <span class="toc-text">1.版心</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%B8%83%E5%B1%80%E5%B8%B8%E7%94%A8%E7%B1%BB%E5%90%8D"><span class="toc-number">14.2.</span> <span class="toc-text">2.布局常用类名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E9%87%8D%E7%BD%AE%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F"><span class="toc-number">14.3.</span> <span class="toc-text">3.重置默认样式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81HTML5%E7%AE%80%E4%BB%8B"><span class="toc-number">15.</span> <span class="toc-text">二、HTML5简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%96%B0%E5%A2%9E%E5%B8%83%E5%B1%80%E6%A0%87%E7%AD%BE"><span class="toc-number">15.1.</span> <span class="toc-text">1.新增布局标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%96%B0%E5%A2%9E%E7%8A%B6%E6%80%81%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.</span> <span class="toc-text">2.新增状态标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1-meter%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.1.</span> <span class="toc-text">2.1 meter标签</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-progress%E6%A0%87%E7%AD%BE"><span class="toc-number">15.2.2.</span> <span class="toc-text">2.2 progress标签</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%B0%E5%A2%9E%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">15.3.</span> <span class="toc-text">3.新增列表标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%B0%E5%A2%9E%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE"><span class="toc-number">15.4.</span> <span class="toc-text">4.新增文本标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%B3%A8%E9%9F%B3"><span class="toc-number">15.4.1.</span> <span class="toc-text">文本注音</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0"><span class="toc-number">15.4.2.</span> <span class="toc-text">文本标记</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span class="toc-number">15.5.</span> <span class="toc-text">5.新增表单标签</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#5-1%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6%E5%B1%9E%E6%80%A7"><span class="toc-number">15.5.1.</span> <span class="toc-text">5.1新增表单控件属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-2-input%E6%96%B0%E5%A2%9E%E7%9A%84type%E5%B1%9E%E6%80%A7%E5%80%BC"><span class="toc-number">15.5.2.</span> <span class="toc-text">5.2 input新增的type属性值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-3form%E6%A0%87%E7%AD%BE%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="toc-number">15.5.3.</span> <span class="toc-text">5.3form标签新增属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E8%A7%86%E9%A2%91%E6%A0%87%E7%AD%BE"><span class="toc-number">15.6.</span> <span class="toc-text">新增视频标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E9%9F%B3%E9%A2%91%E6%A0%87%E7%AD%BE"><span class="toc-number">15.7.</span> <span class="toc-text">新增音频标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-number">15.8.</span> <span class="toc-text">新增全局属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86"><span class="toc-number">15.9.</span> <span class="toc-text">兼容性处理</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81CSS3%E7%AE%80%E4%BB%8B"><span class="toc-number">16.</span> <span class="toc-text">三、CSS3简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-CSS%E6%A6%82%E8%BF%B0"><span class="toc-number">16.1.</span> <span class="toc-text">1.CSS概述</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-CSS3%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.</span> <span class="toc-text">2.CSS3私有前缀</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1%E4%BB%80%E4%B9%88%E6%98%AF%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.1.</span> <span class="toc-text">2.1什么是私有前缀</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.2.</span> <span class="toc-text">2.2为什么要有私有前缀</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3%E5%B8%B8%E7%94%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">16.2.3.</span> <span class="toc-text">2.3常用浏览器私有前缀</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%96%B0%E5%A2%9E%E9%95%BF%E5%BA%A6%E5%8D%95%E4%BD%8D"><span class="toc-number">16.3.</span> <span class="toc-text">3.新增长度单位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%B0%E5%A2%9E%E9%A2%9C%E8%89%B2%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F"><span class="toc-number">16.4.</span> <span class="toc-text">4.新增颜色设置方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%96%B0%E5%A2%9E%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">16.5.</span> <span class="toc-text">5.新增选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E6%96%B0%E5%A2%9E%E7%9B%92%E5%AD%90%E5%B1%9E%E6%80%A7"><span class="toc-number">16.6.</span> <span class="toc-text">6.新增盒子属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#6-1-box-sizing%E6%80%AA%E5%BC%82%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">16.6.1.</span> <span class="toc-text">6.1 box-sizing怪异盒模型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-2resize%E8%B0%83%E6%95%B4%E7%9B%92%E5%AD%90%E5%A4%A7%E5%B0%8F"><span class="toc-number">16.6.2.</span> <span class="toc-text">6.2resize调整盒子大小</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-3-box-shadow%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1"><span class="toc-number">16.6.3.</span> <span class="toc-text">6.3 box-shadow盒子阴影</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-4-opacity%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6"><span class="toc-number">16.7.</span> <span class="toc-text">6.4 opacity不透明度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E6%96%B0%E5%A2%9E%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7"><span class="toc-number">16.8.</span> <span class="toc-text">7.新增背景属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#7-1-background-origin"><span class="toc-number">16.8.1.</span> <span class="toc-text">7.1 background-origin</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-2-background-clip"><span class="toc-number">16.8.2.</span> <span class="toc-text">7.2 background-clip</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-3-background-size"><span class="toc-number">16.8.3.</span> <span class="toc-text">7.3 background-size</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-4-background-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.8.4.</span> <span class="toc-text">7.4 background 复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-5%E5%A4%9A%E8%83%8C%E6%99%AF%E5%9B%BE"><span class="toc-number">16.8.5.</span> <span class="toc-text">7.5多背景图</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%96%B0%E5%A2%9E%E8%BE%B9%E6%A1%86%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">16.9.</span> <span class="toc-text">8.新增边框相关属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#8-1-%E8%BE%B9%E6%A1%86%E5%9C%86%E8%A7%92"><span class="toc-number">16.9.1.</span> <span class="toc-text">8.1 边框圆角</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8-2-%E8%BE%B9%E6%A1%86%E5%A4%96%E8%BD%AE%E5%BB%93"><span class="toc-number">16.9.2.</span> <span class="toc-text">8.2 边框外轮廓</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E6%96%B0%E5%A2%9E%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7"><span class="toc-number">16.10.</span> <span class="toc-text">9.新增文本属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#9-1%E6%96%87%E6%9C%AC%E9%98%B4%E5%BD%B1"><span class="toc-number">16.10.1.</span> <span class="toc-text">9.1文本阴影</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-2%E6%96%87%E6%9C%AC%E6%8D%A2%E8%A1%8C"><span class="toc-number">16.10.2.</span> <span class="toc-text">9.2文本换行</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-3%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA"><span class="toc-number">16.10.3.</span> <span class="toc-text">9.3文本溢出</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-4%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0"><span class="toc-number">16.10.4.</span> <span class="toc-text">9.4文本修饰</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-5%E6%96%87%E6%9C%AC%E6%8F%8F%E8%BE%B9"><span class="toc-number">16.10.5.</span> <span class="toc-text">9.5文本描边</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E6%96%B0%E5%A2%9E%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.</span> <span class="toc-text">10.新增渐变</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#10-1%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.1.</span> <span class="toc-text">10.1线性渐变</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-2%E5%BE%84%E5%90%91%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.2.</span> <span class="toc-text">10.2径向渐变</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-3%E9%87%8D%E5%A4%8D%E6%B8%90%E5%8F%98"><span class="toc-number">16.11.3.</span> <span class="toc-text">10.3重复渐变</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-web%E5%AD%97%E4%BD%93"><span class="toc-number">16.12.</span> <span class="toc-text">11.web字体</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-2D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.13.</span> <span class="toc-text">12.2D变换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#12-1%E5%8F%98%E6%8D%A2%E4%BD%8D%E7%A7%BB"><span class="toc-number">16.13.1.</span> <span class="toc-text">12.1变换位移</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-2%E5%8F%98%E6%8D%A2%E7%BC%A9%E6%94%BE"><span class="toc-number">16.13.2.</span> <span class="toc-text">12.2变换缩放</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-3%E5%8F%98%E6%8D%A2%E6%97%8B%E8%BD%AC"><span class="toc-number">16.13.3.</span> <span class="toc-text">12.3变换旋转</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-4%E5%8F%98%E6%8D%A2%E6%89%AD%E6%9B%B2"><span class="toc-number">16.13.4.</span> <span class="toc-text">12.4变换扭曲</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-5%E5%A4%9A%E9%87%8D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.13.5.</span> <span class="toc-text">12.5多重变换</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-6%E5%8F%98%E6%8D%A2%E5%8E%9F%E7%82%B9"><span class="toc-number">16.13.6.</span> <span class="toc-text">12.6变换原点</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-3D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.14.</span> <span class="toc-text">13.3D变换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#13-1%E7%A9%BA%E9%97%B4%E4%B8%8E%E6%99%AF%E6%B7%B1"><span class="toc-number">16.14.1.</span> <span class="toc-text">13.1空间与景深</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-2%E9%80%8F%E8%A7%86%E7%82%B9%E4%BD%8D%E7%BD%AE"><span class="toc-number">16.14.2.</span> <span class="toc-text">13.2透视点位置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-3-%E4%BD%8D%E7%A7%BB"><span class="toc-number">16.14.3.</span> <span class="toc-text">13.3 位移</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-4%E6%97%8B%E8%BD%AC"><span class="toc-number">16.14.4.</span> <span class="toc-text">13.4旋转</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-5%E7%BC%A9%E6%94%BE"><span class="toc-number">16.14.5.</span> <span class="toc-text">13.5缩放</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13-6%E5%A4%9A%E9%87%8D%E5%8F%98%E6%8D%A2"><span class="toc-number">16.14.6.</span> <span class="toc-text">13.6多重变换</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E8%BF%87%E6%B8%A1"><span class="toc-number">16.15.</span> <span class="toc-text">14.过渡</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#14-1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">16.15.1.</span> <span class="toc-text">14.1 基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14-2%E9%AB%98%E7%BA%A7%E4%BD%BF%E7%94%A8"><span class="toc-number">16.15.2.</span> <span class="toc-text">14.2高级使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14-3-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.15.3.</span> <span class="toc-text">14.3 复合属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E5%8A%A8%E7%94%BB"><span class="toc-number">16.16.</span> <span class="toc-text">15.动画</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#15-1%E5%B8%A7"><span class="toc-number">16.16.1.</span> <span class="toc-text">15.1帧</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-2%E5%8A%A8%E7%94%BB%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">16.16.2.</span> <span class="toc-text">15.2动画的基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-3%E5%8A%A8%E7%94%BB%E5%85%B6%E4%BB%96%E5%B1%9E%E6%80%A7"><span class="toc-number">16.16.3.</span> <span class="toc-text">15.3动画其他属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-4%E5%8A%A8%E7%94%BB%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.16.4.</span> <span class="toc-text">15.4动画复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-5%E5%8A%A8%E7%94%BB%E5%92%8C%E8%BF%87%E6%B8%A1%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">16.16.5.</span> <span class="toc-text">15.5动画和过渡的区别</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80"><span class="toc-number">16.17.</span> <span class="toc-text">16.多列布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-%E4%BC%B8%E7%BC%A9%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">16.18.</span> <span class="toc-text">17.伸缩盒模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#17-1-%E4%BC%B8%E7%BC%A9%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B"><span class="toc-number">16.18.1.</span> <span class="toc-text">17.1 伸缩盒模型简介</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-2-%E4%BC%B8%E7%BC%A9%E5%AE%B9%E5%99%A8%E4%B8%8E%E4%BC%B8%E7%BC%A9%E9%A1%B9%E7%9B%AE"><span class="toc-number">16.18.2.</span> <span class="toc-text">17.2 伸缩容器与伸缩项目</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-3%E4%B8%BB%E8%BD%B4%E6%96%B9%E5%90%91"><span class="toc-number">16.18.3.</span> <span class="toc-text">17.3主轴方向</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-4%E4%B8%BB%E8%BD%B4%E6%8D%A2%E8%A1%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">16.18.4.</span> <span class="toc-text">17.4主轴换行方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-5-flex-flow"><span class="toc-number">16.18.5.</span> <span class="toc-text">17.5 flex-flow</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-6%E4%B8%BB%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">16.18.6.</span> <span class="toc-text">17.6主轴对齐方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-7-%E4%BE%A7%E8%BD%B4%E5%AF%B9%E9%BD%90"><span class="toc-number">16.18.7.</span> <span class="toc-text">17.7 侧轴对齐</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-8%E9%A1%B9%E7%9B%AE%E5%9C%A8%E4%B8%BB%E8%BD%B4%E7%9A%84%E5%9F%BA%E5%87%86%E9%95%BF%E5%BA%A6"><span class="toc-number">16.18.8.</span> <span class="toc-text">17.8项目在主轴的基准长度</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-9-%E4%BC%B8%E7%BC%A9%E6%80%A7"><span class="toc-number">16.18.9.</span> <span class="toc-text">17.9 伸缩性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-10-flex-%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">16.18.10.</span> <span class="toc-text">17.10**flex**复合属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17-11%E9%A1%B9%E7%9B%AE%E6%8E%92%E5%BA%8F%E4%B8%8E%E5%8D%95%E7%8B%AC%E5%AF%B9%E9%BD%90"><span class="toc-number">16.18.11.</span> <span class="toc-text">17.11项目排序与单独对齐</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80"><span class="toc-number">16.19.</span> <span class="toc-text">18.响应式布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-BFC%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89"><span class="toc-number">16.20.</span> <span class="toc-text">19.BFC（重要）</span></a></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/css/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/css/&text=css"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/css/&is_video=false&description=css"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=css&body=Check out this article: https://mihaoyou.gitee.io/css/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/css/&title=css"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/css/&name=css&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/css/&t=css"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
      <div class="footer-left">
        Copyright &copy;
        
        
        2022-2023
        云雪
      </div>
      <div class="footer-right">
        <nav>
          <ul>
            <!--
          --><li><a href="/">首页</a></li><!--
        --><!--
          --><li><a href="/about/">关于</a></li><!--
        --><!--
          --><li><a href="/archives/">归档</a></li><!--
        --><!--
          --><li><a href="/categories/">分类</a></li><!--
        --><!--
          --><li><a href="/search/">搜索</a></li><!--
        -->
          </ul>
          <ul>
          
              <!-- 不蒜子统计 -->
              <span id="busuanzi_container_site_pv">
                  本站总访问量<span id="busuanzi_value_site_pv"></span>次
              </span>
              <span class="post-meta-divider">|</span>
              <span id="busuanzi_container_site_uv" style='display:none'>
                      本站访客数<span id="busuanzi_value_site_uv"></span>人
              </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            
          </ul>
        </nav>
      </div>
      
</footer>


    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板！\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功！");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

  <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?d052d72734717a430b46e4d07257350b";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
        </script>

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

    <script type="text/javascript">
      var utterances_repo = 'mihaoyou/huayu';
      var utterances_issue_term = 'pathname';
      var utterances_label = 'Comment';
      var utterances_theme = 'github-dark';

      (function(){
          var script = document.createElement('script');

          script.src = 'https://utteranc.es/client.js';
          script.setAttribute('repo', utterances_repo);
          script.setAttribute('issue-term', 'pathname');
          script.setAttribute('label', utterances_label);
          script.setAttribute('theme', utterances_theme);
          script.setAttribute('crossorigin', 'anonymous');
          script.async = true;
          (document.getElementById('utterances_thread')).appendChild(script);
      }());
  </script>

</body>
</html>
